点击任意一张图片可以放大预览
需要实现这种效果其实并不难,只要使用下面这个函数就行了
该知识点的官方说明文档链接:点击跳转,需要进一步了解可以点击链接去浏览阅读。
具体实现方法
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链接列表
})
}
})