完美世界前传下载,有声小说下载

新聞中心

這里有您想知道的互聯網營銷解決方案

怎么在微信小程序中實現一個點擊圖片放大預覽-創(chuàng)新互聯

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

成都網絡公司-成都網站建設公司創(chuàng)新互聯10余年經驗成就非凡，專業(yè)從事成都網站設計、成都做網站，成都網頁設計，成都網頁制作，軟文營銷，廣告投放等。10余年來已成功提供全面的成都網站建設方案，打造行業(yè)特色的成都網站建設案例，建站熱線：18982081108，我們期待您的來電！

思路：

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

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

另外有需要云服務器可以了解下創(chuàng)新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享題目：怎么在微信小程序中實現一個點擊圖片放大預覽-創(chuàng)新互聯
文章路徑：http://fisionsoft.com.cn/article/djdigj.html

新聞中心

其他資訊