微信小程序实现图片放大预览效果

可以直接用微信程序自己的api很方便的实现

核心方法 wx.previewImage:

直接上代码，

wxml:

<!--pages/prewpicture/prew.wxml-->
<image src="{{imgList[0]}}" bindtap="imgYu" data-src="{{imgList[0]}}"></image>
<image src="{{imgList[1]}}" bindtap="imgYu" data-src="{{imgList[1]}}"></image>
<image src="{{imgList[2]}}" bindtap="imgYu" data-src="{{imgList[2]}}"></image>

js:

// pages/prewpicture/prew.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    imgList: [
      "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=508387608,2848974022&fm=26&gp=0.jpg",
      "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3139953554,3011511497&fm=26&gp=0.jpg",
      "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1022109268,3759531978&fm=26&gp=0.jpg"
    ]
  },

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

json和wxss用默认的就好。

参考链接：

1. https://www.jianshu.com/p/0d23ea016a83

2. https://blog.csdn.net/weixin_42694072/article/details/83540876