原生小程序使用多图片切换预览功能_原生实现wx.previewimage

        本文讲述在微信原生小程序通过image的点击事件进行多图片预览切换功能，如图所示

点击图片1-2会显示当前所有图片可以左右切换滑动 ，原谅我打马赛克

 1、imgArr是后台返回的图片数组，定义在data中imgArr:[],格式如下

        bindtap="previewSqs"：是当点击图片触发的方法也就是图片点击预览

        data-src:该属性可写可以不写

        src：图片地址

  <image wx:for="{{imgArr}}" wx:key="item" bindtap="previewSqs" data-src="{{item}}" class="img-fluid" src="{{item}}"></image>

2、当点击图片后打开图片预览，代码如下，主要是使用微信预览图片的方法wx:previewImage实现，注意·urls必须为数组形式才能显示多个图片预览

  previewSqs(event) {
    console.log(event, '图片11111111111111');
    let currentUrl = event.currentTarget.dataset.src;
    var imgList = []; //定义一个放图片的数组
    // 循环模拟数据的数组取其中的图片字段，将其添加到imgList数组中
    for (let i = 0; i < this.data.imgArr.length; i++) {
      imgList.push(this.data.imgArr[i]);
    }
    // 调用微信小程序预览图片的方法
    wx.previewImage({
      current: currentUrl, // 当前显示图片的http链接
      urls: imgList // 需要预览的图片http链接列表
    })
  }