怎么在微信小程序中实现一个点击图片放大预览 - 行业资讯

　　介绍

怎么在微信小程序中实现一个点击图片放大预览?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

<强>思路:

1。点击事件

2。放大

3。左右滑动查看的上,下一张

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

索引。wxml

, & lt; view 类=& # 39;topic_answerImg& # 39;比; 　　,, 　　,& lt; block wx:=& # 39; {{item.answerImg}} & # 39;,天气:关键=& # 39;指数# 39;,天气:项=& # 39;answerItem& # 39;比; 　　,& lt; image bindtap=& # 39; topic_preview& # 39;,数据id=& # 39; {{item.id}} & # 39;, data-url=& # 39; {{answerItem}} & # 39;,类=& # 39;topic_answer_itemImg& # 39;, src=https://www.yisu.com/zixun/的{{answerItem}}> 　　块　　　　

<强>注意:上面获取的ID是这一组数据的ID不是这个图片的ID

索引。wxs

.topic_answerImg { 　　,宽度:100%; 　　,显示:-webkit-box; 　　,显示:-webkit-flex; 　　,flex-wrap:包装; 　　} 　　.topic_answer_itemImg { 　　,宽度:210 rpx; 　　,身高:210 rpx; 　　,margin-right: 30 rpx; 　　,margin-bottom: 30 rpx; 　　} 　　.topic_answer_itemImg: nth-of-type (3 n) { 　　,margin-right: 0; 　　}

指数,js

,//预览图片　　,topic_preview:函数(e) {=,var that ; 　　,var id =, e.currentTarget.dataset.id; 　　,var url =, e.currentTarget.dataset.url; 　　,var previewImgArr =, []; 　　,//通过循环在数据链里面找到和这个id相同的这一组数据,然后再取出这一组数据当中的图片　　,var data =, that.data.topic_recomData; 　　,for (var 小姐:拷贝数据),{ 　　,if (id ==,数据[我].id), {=,previewImgArr 数据[我].pic; 　　,} 　　,} 　　,wx.previewImage ({ 　　,当前:url,,//,当前显示图片的http链接　　url:大敌;previewImgArr //,需要预览的图片http链接列表　　,}) 　　},

看完上述内容,你们掌握怎么在微信小程序中实现一个点击图片放大预览的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注行业资讯频道,感谢各位的阅读!