在微信小程式中如何實作圖片預覽功能

這篇文章主要為大家詳細介紹了微信小程式實現圖片預覽功能，具有一定的參考價值，有興趣的夥伴們可以參考一下

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

效果圖

原則

• 使用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連結。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

詳細解讀Vue.js中的元件使用方法以及作用？

AngularJS1.x應用遷移至React（詳細教學）

在vue 2.0中如何實作購物車小球拋物線

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