How to click on the WeChat applet to view the original image

How to click to view the original image in the WeChat applet

First you need to prepare two image arrays, one to store the image URL of the preview image, and the other to store the image URL of the preview image. The image URL of the original image; then when you click on the preview image, pass the array of the original image into the wx.previewImage() method.

1. WXML code

<view class=&#39;detail_img&#39;>
        <view class=&#39;view_img&#39; wx:for="{{imglist}}" wx:for-item="image" wx:for-index="idx">
          <image src=&#39;{{image}}&#39; data-idx="{{idx}}" bindtap="previewImage"></image>
        </view>
        <view style=&#39;clear:both;&#39;></view>
    </view>

2. JS code

data: {
    previewlist:['预览图链接','预览图链接','预览图链接'],
    originallist:['原图链接','原图链接','原图链接']
  },

/**   
     * 预览图片  
     */
  previewImage: function (e) {
    var current = this.data.originallist[e.target.dataset.idx];
    wx.previewImage({
      current: current, // 当前显示图片的http链接  
      urls: this.data.originallist// 需要预览的图片http链接列表  
    })
  } ,

Recommended learning: 小program development

The above is the detailed content of How to click on the WeChat applet to view the original image. For more information, please follow other related articles on the PHP Chinese website!