微信小程序實現圖片放大預覽效果

可以直接用微信程序自己的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