怎么在微信小程序中實現(xiàn)一個點擊圖片放大預(yù)覽？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供天臺網(wǎng)站建設(shè)、天臺做網(wǎng)站、天臺網(wǎng)站設(shè)計、天臺網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、天臺企業(yè)網(wǎng)站模板建站服務(wù)，十余年天臺做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

思路：

1.點擊事件

2.放大

3.左右滑動查看上、下一張

在綁定點擊事件的時候我們需要同時獲取到點擊圖片的url和這一組數(shù)據(jù)的ID(通過這個id從數(shù)據(jù)里面找到你點擊的這一組數(shù)據(jù)然后從中取出這一組圖片就可以了)

index.wxml

注意：上面獲取的ID是這一組數(shù)據(jù)的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

 //預(yù)覽圖片
 topic_preview: function(e){
 var that = this;
 var id = e.currentTarget.dataset.id;
 var url = e.currentTarget.dataset.url;
 var previewImgArr = [];
 //通過循環(huán)在數(shù)據(jù)鏈里面找到和這個id相同的這一組數(shù)據(jù)，然后再取出這一組數(shù)據(jù)當(dāng)中的圖片
 var data = that.data.topic_recomData;
 for (var i in data) {
 if (id == data[i].id) {
 previewImgArr = data[i].pic;
 }
 }
 wx.previewImage({
 current: url, // 當(dāng)前顯示圖片的http鏈接
 urls: previewImgArr // 需要預(yù)覽的圖片http鏈接列表
 })
 },

看完上述內(nèi)容，你們掌握怎么在微信小程序中實現(xiàn)一個點擊圖片放大預(yù)覽的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！