How to implement image enlargement preview function in WeChat applet

WeChat mini programs are becoming more and more popular, and programmers are constantly exposed to the development of WeChat mini programs. In this article, we will teach you a WeChat mini program: when you click on a picture, the current picture will be enlarged and previewed, and you can slide it left or right. Function.

Implementation method: Use WeChat applet image preview interface

We can see that the api requires two parameters, respectively through the following data- list and data-src are passed to js

wxml code:

<!--图片描述-->
<view wx:if="{{item.pictures}}" class="list-dImg">
<image bindtap="imgYu" data-list="{{item.pictures}}" data-src="{{dImg}}" wx:for="{{item.pictures}}" wx:for-item="dImg" src="{{dImg}}"></image>
</view>

js code:

//图片点击事件
 imgYu:function(event){
 var src = event.currentTarget.dataset.src;//获取data-src
 var imgList = event.currentTarget.dataset.list;//获取data-list
 //图片预览
 wx.previewImage({
  current: src, // 当前显示图片的http链接
  urls: imgList // 需要预览的图片http链接列表
 })
 }

1. Add a click event (imgYu) to the image

2. Use event.currentTarget.dataset.Custom attribute name to get the value of data- Such as event.currentTarget.dataset.src (get the value of data-src)

3. Then put the two obtained values ​​into the wx.previewImage interface

Follow the above Let's do some hands-on operation on the content, and you can realize the enlarged preview of the picture, and you can slide it left and right. Let's do it quickly.

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