Wechat applet image zoom preview effect

The method used is: wx.previewImage

First look at the effect:

Effect before preview

Magnification effect:

 

wxml：

<block wx:for="{
    
    {submintFiles}}" wx:key="*this">
    <view class="weui-uploader__file pr" data-index="{
    
    {index}}" bindtap="previewImage" id="{
    
    {item.cllj}}">
     <van-icon size="22px" color="#fff" name="cross" data-item="{
    
    {item.cllj}}" data-index="{
    
    {index}}" catchtap="deleteImg" wx:if="{
    
    {inspectionPointState=='0'}}" />
     <image class="weui-uploader__img" src="{
    
    {imgHttp}}{
    
    {item.cllj}}" mode="aspectFill" />
    </view>
</block>

 JS:

previewImage: function (e) {
    var urlVal = this.data.imgHttp+e.currentTarget.id

    //因为我这里对前缀做了处理，所以多出这些代码-S
    var viewImgList = []
    this.data.submintFiles.forEach((item)=>{
      viewImgList.push(this.data.imgHttp+item.cllj)
    })
    //如果不需要对前缀做处理的可不管上面的代码-E
    wx.previewImage({
      current:urlVal,//预览的当前图片的地址
      urls:viewImgList//预览图片的数组
    })
  },