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

基于移动端端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); } })