基于移动端端vant使用ImagePreview 图片预览的使用的一些问题

甄云
2023-12-01

基于移动端端vant使用ImagePreview 图片预览的使用的一些问题

关于使用vant中的ImagePreview 图片预览的使用:

使用指南

和其他组件不同,不是通过HTML结构的方式来使用,而是通过函数调用的方式。使用前需要先引入它。

 import { Lazyload } from 'vant';

基本用法

直接传入图片数组,即可展示图片预览

ImagePreview([
  'https://img.yzcdn.cn/1.jpg',
  'https://img.yzcdn.cn/2.jpg'
]);

传入配置项
通过传入配置对象,可以指定初始图片的位置、监听关闭事件

  ImagePreview({
                    images:[            //需要预览的图片URL数组
                        'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg',
                        'https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg'
                    ],
                    startPosition:0,    //图片预览起始位置索引 默认 0
                    showIndex: true,    //是否显示页码         默认 true
                    showIndicators: true, //是否显示轮播指示器 默认 false
                    loop:false,            //是否开启循环播放  貌似循环播放是不起作用的。。。
                    onClose:function (url) {  //回调参数,官方文档解释的不是很清楚。。。
                        //回调参数类型 url:{ index:Number(当前图片的索引值), url:当前图片的URL }
                        var num = url.index, url_link = url.url;
                        console.log(url);
                    }
                })
 类似资料: