Recently a lot of students just learning small program, want to do what kind of picture click to enlarge, and then you can slide around the preview effect. I also specially to study, found that the direct use of wechat program’s own API can be very convenient to achieve. Today will teach you how to achieve small program picture click to enlarge the effect.

Same old rule — look at the renderings first

Without further ado, get right to the code

1. First define a page image.wxml

<! --pages/image/image.wxml--> <image src="{{imgList[0]}}" bindtap="preview" data-src="{{imgList[0]}}"></image>
<image src="{{imgList[1]}}" bindtap="preview" data-src="{{imgList[1]}}"></image>
<image src="{{imgList[2]}}" bindtap="preview" data-src="{{imgList[2]}}"></image>
Copy the code

This page is very simple, just put three images to display the three images in the imgList array.

2. The core methods to achieve the image enlargement effect are as follows.

3. Post the complete code for image.js.

Page({
  data: {
    imgList: [
      "Https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=508387608, & FM = 26 & gp = 0. 2848974022 JPG"."Https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3139953554, & FM = 26 & gp = 0. 3011511497 JPG"."Https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1022109268, & FM = 26 & gp = 0. 3759531978 JPG"]}, enlarge / / preview images, preview the preview (event) {the console. The log (event. The currentTarget. Dataset. SRC)letCurrentUrl = event. The currentTarget. Dataset. SRC wx. PreviewImage ({current: currentUrl, / / the current HTTP link urls to display images: This.data.imglist // List of HTTP links to preview images})}})Copy the code

Here, too, it’s easy to define an array of imgList images. Then define a method to make the image look like an enlarged preview when you click on it. In fact, so much code, we can easily achieve small program picture click to enlarge the effect. Isn’t that easy? I also have a video explanation: edu.csdn.net/course/deta…