最近很多刚学小程序的同学都想把自己想做的图片点开放大，然后左右滑动预览效果。我还专门研究过，发现直接用微信程序的api非常方便。今天就来教大家如何实现小程序图片的点击放大效果。
老规矩，先看效果图
渲染速度有点快，但大致可以看到效果。我再给你描述一下
一页有3张图片。单击其中任何一个以放大预览。然后预览的时候左右滑动，也可以看看另外两张图。
话不多说，直接上代码
一，实现多张图片点击放大效果1-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数组里的三张图片。& lt！-pages/image/image . wxml-& gt； & lt；image src = & # 34{ { img list[0]} } & # 34；bindtap = & # 34预览& # 34；data-src = & # 34；{ { img list[0]} } & # 34；& gt& lt/image & gt； & lt；image src = & # 34{ { img list[1]} } & # 34；bindtap = & # 34预览& # 34；data-src = & # 34；{ { img list[1]} } & # 34；& gt& lt/image & gt； & lt；image src = & # 34{ { img list[2]} } & # 34；bindtap = & # 34预览& # 34；data-src = & # 34；{ { img list[2]} } & # 34；& gt& lt/image & gt； 这个页面很简单，就是放三个image来显示imgList数组中的三张图片。
1-2，实现图片放大效果的核心方法如下。
上图是官方举例。让我们看看它在实践中是如何使用的。
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图片数组。然后定义一个方法，在点击图片时实现图片放大预览的效果。
其实代码就这么多，我们就可以轻松的实现小程序图片的点击放大效果了。
是不是很简单。page({
data:{
imgList:[
& # 34；https://ss0 . BD static . com/70 cfu HSH _ q 1 ynxgkpowk 1 HF 6 hy/it/u = 508387608，2848974022 & FM = 26 & gp = 0 . jpg & # 34；，
& # 34；https://ss3 . BD static . com/70 cf V8 sh _ q 1 ynxgkpowk 1 HF 6 hy/it/u = 3139953554，3011511497 & FM = 26 & gp = 0 . jpg & # 34；，
& # 34；https://ss0 . BD static . com/70 cfvhsh _ q 1 ynxgkpowk 1 HF 6 hy/it/u = 1022109268，3759531978 & FM = 26 & gp = 0 . jpg & # 34；
}，
//预览图片，放大预览
预览(事件){
console . log(event . current target . dataset . src)
let current URL = event . current target . dataset . src
wx . preview image({
current URL，//当前显示图片的http链接
URL:this . data . imi
其实就这么多代码，我们很容易实现小程序图片的点击放大效果。
是不是很简单？
其实我们的轮播地图也可以通过点击放大。
2-1，效果图首先，转盘如下图。
我们可以看到我们有三张轮播图片。点击放大效果。
<swiper indicator-dots> <swiper-item wx:for="{{imgList}}" bindtap="preview" data-index="{{index}}"> <image src="{{item}}"></image> </swiper-item> </swiper>
其实就是一个轮播图的实现，外加一个点击事件& ltswiper指示器-dots & gt； & lt；swiper-item wx:for = & # 34；{ { imgList } } & # 34bindtap = & # 34预览& # 34；数据索引= & # 34；{ { index } } & # 34& gt & lt；image src = & # 34{ { item } } & # 34& gt& lt/image & gt； & lt；/swiper-item & gt； & lt；/swiper & gt； 其实就是一个轮播的实现，加上一个点击事件。
2-3，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) { let index = event.currentTarget.dataset.index wx.previewImage({ current: this.data.imgList[index], // 当前显示图片的http链接 urls: this.data.imgList // 需要预览的图片http链接列表 }) } })
到这里我们就完整的实现了图片点击放大的效果了，是不是很简单。page({ data:{ imgList:[ & # 34；https://ss0 . BD static . com/70 cfu HSH _ q 1 ynxgkpowk 1 HF 6 hy/it/u = 508387608，2848974022 & FM = 26 & gp = 0 . jpg & # 34；， & # 34；https://ss3 . BD static . com/70 cf V8 sh _ q 1 ynxgkpowk 1 HF 6 hy/it/u = 3139953554，3011511497 & FM = 26 & gp = 0 . jpg & # 34；， & # 34；https://ss0 . BD static . com/70 cfvhsh _ q 1 ynxgkpowk 1 HF 6 hy/it/u = 1022109268，3759531978 & FM = 26 & gp = 0 . jpg & # 34； }， //预览图片，放大预览 预览(事件){ let index = event。current target . dataset . index wx . preview image({ current:this . data . imglist[index]，//当前显示图片的http链接 URL:this . data . imglist//待预览图片的http链接列表 }) } }] 至此，我们已经完全实现了点击放大图片的效果，是不是很简单？
