微客导航 » 文章资讯 » 微信小程序实现点击图片放大预览

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

2023-08-10 16:46:04 260

这个强大的API(wx.previewImage())，接下来我们来讲一下微信小程序中图片点击放大预览的实现步骤！

思路：

1.点击事件

2.放大

3.左右滑动查看上、下一张

在绑定点击事件的时候我们需要同时获取到点击图片的url和这一组数据的ID(通过这个id从数据里面找到你点击的这一组数据然后从中取出这一组图片就可以了)

index.wxml

注意：上面获取的ID是这一组数据的id不是这个图片的id

index.wxss

.topic_answerImg{
width:100%;
display:-webkit-box;
display:-webkit-flex;
flex-wrap:wrap;
}
.topic_answer_itemImg{
width:210rpx;
height:210rpx;
margin-right:30rpx;
margin-bottom:30rpx;
}
.topic_answer_itemImg:nth-of-type(3n){
margin-right:0;
}

index,js

//预览图片
topic_preview:function(e){
varthat=this;
varid=e.currentTarget.dataset.id;
varurl=e.currentTarget.dataset.url;
varpreviewImgArr=[];
//通过循环在数据链里面找到和这个id相同的这一组数据，然后再取出这一组数据当中的图片
vardata=that.data.topic_recomData;
for(variindata){
if(id==data[i].id){
previewImgArr=data[i].pic;
}
}
wx.previewImage({
current:url,//当前显示图片的http链接
urls:previewImgArr//需要预览的图片http链接列表
})
},

这样就可以点击图片进行预览。

更多图片处理教程请点击下方专题参考学习：

javascript图片处理专题

javascript图片预览专题

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐