小程序點擊圖片放大效果 單張圖片 多張圖片

<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
      })
    }
  }