微信小程序-图片的放大预览操作

点击任意一张图片可以放大预览

需要实现这种效果其实并不难，只要使用下面这个函数就行了

该知识点的官方说明文档链接：点击跳转，需要进一步了解可以点击链接去浏览阅读。

具体实现方法

1、定义图片路径

• 图片路径必须是超链接地址或者自己云服务器的File ID地址，直接保存在文件夹的图片是不可以的
• 多张图片则定义成数组，用逗号隔开

imgList：["图片1的地址","图片2的地址","图片3的地址"]

• 一张图片则直接定义就行了

img:"图片的地址"

2、图片的显示

• 将图片的URL传给src来显示图片，数组的下标从0开始，0表示第一张图片
• 通过data-id 绑定图片的超链接地址

3、放大预览

完整代码

index.wxml

<view>图片1</view>
<image src="{{imgList[0]}}" bindtap="preview" data-id="{{imgList[0]}}"></image>
<view>图片2</view>
<image src="{{imgList[1]}}" bindtap="preview" data-id="{{imgList[1]}}"></image>
<view>图片3</view>
<image src="{{imgList[2]}}" bindtap="preview" data-id="{{imgList[2]}}"></image>

index.js

  Page({
    data: {
      imgList: [
      "https://7869-xiaocongtongxue-d44jy-1300575451.tcb.qcloud.la/Swiper/h1.png?sign=81900e5be76e34e5984968fab8a048ec&t=1582002749",
      "https://7869-xiaocongtongxue-d44jy-1300575451.tcb.qcloud.la/Swiper/h2.png?sign=b77111e207905885d103917b5198cfc8&t=1582002781",
      "https://7869-xiaocongtongxue-d44jy-1300575451.tcb.qcloud.la/Swiper/h3.png?sign=0488a36ca2b5089b22c69b453fe6a8f8&t=1582002845"
    ]
},

  //放大预览图片
  preview(event) {
    let currentUrl = event.currentTarget.dataset.id   //获取点击的图片的超链接地址
    wx.previewImage({
      current: currentUrl, // 当前显示图片的http链接
      urls: this.data.imgList // 需要预览的图片http链接列表
    })

  }
})