小程序点击图片放大效果 单张图片 多张图片

<block wx:for="{{effect_pic}}" wx:key="*this"  >
      <swiper-item wx:key="*this">
        <image bindtap='previewImg' data-effect_pic='{{effect_pic}}'  data-src='{{item}}' src="{{item}}" mode="aspectFill" class="slide-image" class='img' />
      </swiper-item>
    </block>
  // 图片点击放大 
  previewImg: function (e) {
    var src = e.currentTarget.dataset.src;//获取data-src  循环单个图片链接
    var imgList = e.currentTarget.dataset.effect_pic;//获取data-effect_pic   图片列表
    //图片预览
    wx.previewImage({
      current: src, // 当前显示图片的http链接
      urls: imgList // 需要预览的图片http链接列表
    })
  },

 单张图片点击放大效果

urls必须是一个数组  且 第一个值不能为空
<view class='honourBox'>
      <view class='honourList' wx:for="{{honor_id}}" wx:key="*this" bindtap='viewbigimg' data-licence='{{licence}}' data-name='{{item.name}}'>
        <image  class='img-honour' src='{{item.honor_pic}}'></image>
        <view>{{item.name}}</view>
      </view>
    </view>
// 点击平台荣誉下的列表图片放大
  viewbigimg: function(e) {
    var that = this; 
    console.log(e.currentTarget.dataset.name)
    console.log(e.currentTarget.dataset.licence)
    if (e.currentTarget.dataset.name == "持证") { 
      var imgArr = [];
      imgArr[0] = e.currentTarget.dataset.licence 
      wx.previewImage({
        current: e.currentTarget.dataset.licence, //当前图片地址
        urls: imgArr
      })
    }
  }
原文地址:https://www.cnblogs.com/xiaoxiao2017/p/10443359.html