關於使用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);
}
})