【微信小程序】--bindtap參數傳遞，配合wx.previewImage實現多張縮略圖預覽

---

本文為原創隨筆，純屬個人理解。如有錯誤，歡迎指出。

如需轉載請注明出處

---

在微信小程序中預覽圖片分為

　　a、預覽本地相冊中的圖片。

　　b、預覽某個wxml中的多張圖片。

分析：實質其實是一樣的。都是給wx.previewImage傳入參數

wx.previewImage{
  current:''.//打開預覽時要顯示圖片的地址。
  urls:[],//需要預覽的圖片的地址數組。        
}

 這里拿b、預覽某個wxml中的圖片列表來講解bindtap的傳值問題。a、預覽本地相冊。可以結合wx.chooseImage接口來實現，這里就不多說了。

直接上效果吧

 

上代碼   

// wxml中的關鍵代碼

 <view class="right imgs" >
       <view class="img" wx:for="{{item.info_file}}" wx:for-item="img" wx:key="img" id="img" bindtap='previewImg' id="img" data-imgs='{{item.info_file}}' data-currentimg="{{img}}">
           <image src="{{server_host}}{{img}}"></image>
       </view>
</view>

// 對應js中bindtap函數的代碼

 previewImg: function (event) {
    var that =this;
    console.log(event);
    var imgs= event.currentTarget.dataset.imgs;
    var temp=[];
    for (var index in imgs){
      temp = temp.concat(app.globalData.SERVER_HOST+imgs[index]);
    }
    wx.previewImage({
      current: app.globalData.SERVER_HOST+event.currentTarget.dataset.currentimg,
      urls: temp,
    })
  }

關鍵解釋：

1. bindtap傳值方式：通過data-*的方式傳遞參數。然后從相應函數的參數event中獲取對應的值。此處使用data-imgs傳遞將要預覽的圖片的地址數組。則在相應函數中則通過event.currentTarget.dataset.imgs即可獲得相應的值。同理data-currentimg。則是通過event.currentTarget.dataset.currentimg獲取傳入的值。