基於移動端端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);
                    }
                })
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章