【微信小程序】--bindtap參數傳遞,配合wx.previewImage實現多張縮略圖預覽
阿新 • • 發佈:2017-10-27
function src highlight enter lda glob get 使用 入參
本文為原創隨筆,純屬個人理解。如有錯誤,歡迎指出。
如需轉載請註明出處
在微信小程序中預覽圖片分為
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, }) }
關鍵解釋:
- bindtap傳值方式:通過data-*的方式傳遞參數。然後從相應函數的參數event中獲取對應的值。此處使用data-imgs傳遞將要預覽的圖片的地址數組。則在相應函數中則通過event.currentTarget.dataset.imgs即可獲得相應的值。同理data-currentimg。則是通過event.currentTarget.dataset.currentimg獲取傳入的值。
【微信小程序】--bindtap參數傳遞,配合wx.previewImage實現多張縮略圖預覽