How to implement image preview function in WeChat mini program

This article mainly introduces the image preview function of the WeChat applet in detail. It has certain reference value. Interested friends can refer to it.

This article shares the implementation of the WeChat applet for everyone. The specific code for image preview is for your reference. The specific content is as follows

Rendering

Principle

• Usage wx.chooseImage selects a local image;

• Use wx.previewImage to preview the image.

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
  })
 }
})

Note

wx The parameters current and urls of .previewImage must be http links.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed explanation of how to use components and their functions in Vue.js?

Migrate AngularJS1.x application to React (detailed tutorial)

How to implement the shopping cart ball parabola in vue 2.0

The above is the detailed content of How to implement image preview function in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!