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

1. 有时候我们需要将图片弹出放大预览-使用微信官方给的方法wx.previewImage
   
   这个地方是必填选项，其他的可以不填写

2. 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” ：点击触发事件的方法

3. js方法代码

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

4. 在微信开发者工具中测试或者真机测试，点击图片放大预览，
5. 效果图
   真机渲染的图片
   
   点击后放大的效果 可以左右滑动切换预览的图片