微信小程序图片点击预览

官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/wx.previewImage.html?search-key=wx.previewImage

1、单张图片点击预览：

<view class='top'>
    <image src="{{discount.imgPath}}"  bindtap='imgYu'></image>
  </view>

//图片点击事件
  imgYu: function (event) {
    var that=this;
    var src = that.data.discount.imgPath;//获取data-src
    var imgList = [that.data.discount.imgPath];//获取data-list
    //图片预览
    wx.previewImage({
      current: src, // 当前显示图片的http链接
      urls: imgList // 需要预览的图片http链接列表
    })
  },

2、多张图片点击预览：

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" style='height:{{swiperHeight}}rpx;position:relative;' bindchange="change" indicator-color="#fff" indicator-active-color="#dcb236">
      <swiper-item  wx:for="{{imgUrls}}" wx:key>
        <!-- 主要是下面这行呀 -->
        <image src="{{item}}" class="slide-image"  mode='widthFix' data-list="{{item}}" data-src="{{item}}"  bindtap='imgYu'/>
      </swiper-item>
    </swiper>

//轮播图点击预览
  imgYu: function (event) {
    var that = this;
    var src = event.currentTarget.dataset.src;//获取data-src
    var imgList = that.data.imgUrls;//获取data-list
    //图片预览
    wx.previewImage({
      current: src, // 当前显示图片的http链接
      urls: imgList // 需要预览的图片http链接列表
    })
  },