本文為大家分享了微信小程序實現圖片預覽的具體代碼,供大家參考,具體內容如下
效果圖

原理
WXML
<view> <button bindtap="previewImage" type="primary">圖片上傳預覽</button> <view class="tui-content"> <image class="tui-preview-img" wx:for="{{previewImageArr}}" bindtap="changePreview" data-src="{{item}}" src="{{item}}"></image> </view></view>WXSS
page{background-color: #efeff4;}.tui-preview-img{ width: 200rpx; height: 120rpx;}JS
Page({ data: { previewImageArr:[] }, previewImage(e){ var self = this; wx.chooseImage({ count:8, success(res) { var tempFilePaths = res.tempFilePaths; self.setData({ previewImageArr: tempFilePaths}); } }) }, changePreview(e){ var self = this; wx.previewImage({ current: e.currentTarget.dataset.src, urls: self.data.previewImageArr }) }})注意
wx.previewImage的參數current和urls必須是http鏈接。
DEMO下載
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答