How to realize the function of click picture amplification in wechat applet

Time:2020-2-20

This article mainly introduces how to realize the function of click image amplification in wechat applet. The example code is introduced in detail in this article, which has certain reference value for your study or work. You can refer to the following for your friends

WXML:


 <view class='imgList'>   
  <view class='imgList-li' wx:for='{{imgArr}}'>
   <image class='img' src='{{item}}' data-src='{{item}}' bindtap='previewImg'></image>
  </view>
 </view>

WXSS:


.imgList{
 width: 100%;
}
.imgList .imgList-li{
 width: 100%;
}
.imgList .imgList-li .img{
 width: 400rpx;
 height: 400rpx;
}

JS:

Page({
 data: {
  imgArr:[
   'https://imgs.developpaper.com/imgs/528aa13209e86d5d9839890967a6b9c1.jpg',
   'https://imgs.developpaper.com/imgs/54fcef525fa8f6037d180f3c26f3be65.jpg',
   'https://imgs.developpaper.com/imgs/62e3ca3a02dddb002eff00482078d194.jpg',
   'https://imgs.developpaper.com/imgs/c7167fcfb4ebcd12621c05b0c852e98e.jpg'
  ]
 },
 previewImg:function(e){
  console.log(e.currentTarget.dataset.src);
  let that = this;
  wx.previewImage({
   Current: e.currenttarget.dataset.src, // current image address
   URLs: that.data.imgarr, // array form of address set of all pictures to preview
  })
 }
})

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.