Vant轮播预览图片

「爱情、让人受尽委屈。」 2023-10-11 10:42 181阅读 0赞

<van-swipe :autoplay="10000" class="swiper">
                    <van-swipe-item v-for="(image, index) in images" :key="index" >
                        <img :src="image" @click="Preview_img(images,index)"/>
                    </van-swipe-item>
                </van-swipe>

<script>
        import {ImagePreview} from 'vant';//引入预览
        export default {
            name: 'HelloWorld',
            data() {
                return {
                    images: [
                        'https://img.yzcdn.cn/vant/apple-1.jpg',
                        'https://img.yzcdn.cn/vant/apple-2.jpg'
                    ],
            
                }
            },
            methods: {
                // 轮播图预览
                Preview_img(images, index) {
                    ImagePreview({
                        images: images,//图片数组
                        showIndex: true,
                        loop: false,
                        startPosition: index
                    })
                }
            }
        }
    </script>

转载于:https://www.cnblogs.com/wangshishuai/p/11395284.html

发表评论取消回复

表情：

评论列表（有 0 条评论，181人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vant轮播预览图片

<van-swipe :autoplay="10000" class="swiper"> <van-swipe-item v-f

「爱情、让人受尽委屈。」/ 2023年10月11日 10:42/ 0 赞/ 182 阅读

相关小程序预览轮播图大图

在很多的地方需要这一功能，比如淘宝点击商品的轮播图或会放大这一张图片到全屏。这具体怎么实现呢？首先对轮播图绑定一个单击事件，并且给其一个参数，也就是当前图片的url

水深无声/ 2023年07月23日 14:59/ 0 赞/ 30 阅读

相关有赞Vant组件库的引入及轮播图片预览的实现

有赞Vant组件库的引入及轮播图片预览的实现 1、图片预览组件ImagePreview 这个[vant组件][vant]与其它组件的引入方式不同，不需要在`main

分手后的思念是犯贱/ 2023年02月21日 12:59/ 0 赞/ 120 阅读

相关 13.轮播图预览、更换头像

预览 detail.wxml  <swiper> <swiper-item wx:for="{ { goodsInfo

Dear 丶/ 2023年02月17日 11:10/ 0 赞/ 134 阅读

相关 vant图片上传的功能带预览

文档 https://youzan.github.io/vant/\/zh-CN/uploader vue组件 <template> <div cla

忘是亡心i/ 2023年02月15日 12:52/ 0 赞/ 43 阅读

相关 vant 图片预览

使用vant/vue --ts图片预览实现效果 ![在这里插入图片描述][2021010615194537.gif_pic_center] vant ui

ゝ一纸荒年。/ 2023年01月03日 01:20/ 0 赞/ 702 阅读

相关 JQ实现图片预览（轮播，放大缩小，拖拽，ajax请求，旋转）

jQuery实现图片预览（功能包括：ajax请求数据、弹出关闭蒙层、轮播、点击放大缩小、鼠标滚动放大缩小、键盘上下键放大缩小、旋转、拖拽），新手注意图标、bootstrop和j

我会带着你远行/ 2022年12月10日 15:54/ 0 赞/ 665 阅读

相关图片预览

插件：uploadPreview.min.js <tr> <th>商品图片</th>

Love The Way You Lie/ 2022年07月11日 05:40/ 0 赞/ 706 阅读

相关图片预览

定制上传按钮： ![ExpandedBlockStart.gif][] ![复制代码][copycode.gif] <div

「爱情、让人受尽委屈。」/ 2021年12月22日 09:21/ 0 赞/ 924 阅读

相关 Vue-Vant实现轮播图

参考文档：[Vant][] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

我会带着你远行/ 2021年09月09日 02:02/ 0 赞/ 1764 阅读