微信小程式圖片預覽功能的實作程式碼

圖片預覽是一個很普遍的功能，本文主要和大家詳細介紹了微信小程式實現圖片預覽功能，具有一定的參考價值，有興趣的小伙伴們可以參考一下，希望能幫助到大家。

效果圖

#原則

• #使用wx.chooseImage選擇本機圖片；

• 
  

使用wx.chooseImage選擇本機圖片；

使用wx.previewImage預覽圖。

WXML

<view>
 <button bindtap="previewImage" type="primary">图片上传预览</button>
 <view class="tui-content"> 
  <image class="tui-preview-img" wx:for="{{previewImageArr}}" bindtap="changePreview" 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連結。

相關推薦：

AJAX實作圖片預覽與上傳及產生縮圖的方法

###nodejs實作圖片預覽和上傳的範例程式碼############jQuery使用uploadView如何實作圖片預覽上傳功能的實例######

以上是微信小程式圖片預覽功能的實作程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！