一个页面有3张图片，点击其中任意一张都可以放大预览。然后在预览的时候，左右滑动，还可以看另外两张图片。
话不多说，直接上代码
1，首先定义一个页面image.wxml
<!--pages/image/image.wxml-->
<image src="{{imgList[0]}}" bindtap="preview" data-src="{{imgList[0]}}"></image>
<image src="{{imgList[1]}}" bindtap="preview" data-src="{{imgList[1]}}"></image>
<image src="{{imgList[2]}}" bindtap="preview" data-src="{{imgList[2]}}"></image>
这个页面很简单，就是放三个image用来显示imgList数组里的三张图片。
2，实现图片放大效果的核心方法如下。
上图是官方的示例。我们来看下实际中是如何使用的。
3把image.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"
]
},
//预览图片，放大预览
preview(event) {
console.log(event.currentTarget.dataset.src)
let currentUrl = event.currentTarget.dataset.src
wx.previewImage({
current: currentUrl, // 当前显示图片的http链接
urls: this.data.imgList // 需要预览的图片http链接列表
})
}
})
这里也很简单，就是定义一个imgList图片数组。然后定义一个方法，在点击图片时实现图片放大预览的效果。
其实代码就这么多，我们就可以轻松的实现小程序图片的点击放大效果了。
是不是很简单。
