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

「爱情、让人受尽委屈。」 2023-02-21 13:00 4阅读 0赞

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