微信小程序——点击图片放大预览

2024-06-19 小程序 0

有时候我们需要将图片弹出放大预览-使用微信官方给的方法wx.previewImage

这个地方是必填选项，其他的可以不填写
wxml文件里添加点击事件

<image style="width: 325rpx;" wx:for="{{detail.pic}}" wx:key="id" data-src="{{item}}" src="{{item}}" bind:tap="previewImage"></image>

代码解读：wx:for=“{{detail.pic}}” 循环渲染需要的图片数组
data-src=“{{item}}”：自定义图片地址的属性可以在点击事件中获取到该属性
bind:tap=“previewImage” ：点击触发事件的方法

js方法代码

 previewImage(e){        console.log('3433',e)        var currentUrl = e.currentTarget.dataset.src //获取当前点击图片链接        wx.previewImage({          current:currentUrl,//当前点击的预览图片链接          urls: this.data.detail.pic,//需要预览的图片列表        })    },