小编给大家分享一下小程序中怎样实现点击图片放大功能，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
WXML：
<view class='imgList'>
<view class='imgList-li' wx:for='{{imgArr}}'>
<image class='img' src='{{item}}' data-src='{{item}}' bindtap='previewImg'></image>
</view>
</view>WXSS：
.imgList{
width: 100%;
}
.imgList .imgList-li{
width: 100%;
}
.imgList .imgList-li .img{
width: 400rpx;
height: 400rpx;
}JS：
Page({
data: {
imgArr:[
'https://cache.yisu.com/upload/information/20200622/114/7598.jpg',
'https://cache.yisu.com/upload/information/20200622/114/7599.jpg',
'https://cache.yisu.com/upload/information/20200622/114/7600.jpg',
'https://cache.yisu.com/upload/information/20200622/114/7601.jpg'
]
},
previewImg:function(e){
console.log(e.currentTarget.dataset.src);
let that = this;
wx.previewImage({
current:e.currentTarget.dataset.src, //当前图片地址
urls: that.data.imgArr, //所有要预览的图片的地址集合 数组形式
})
}
})看完了这篇文章，相信你对“小程序中怎样实现点击图片放大功能”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
