关于使用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);
}
})