微信小程序?qū)崿F(xiàn)點(diǎn)擊圖片放大預(yù)覽

更新時間：2019年10月21日 10:21:00 作者：孤獨(dú)行善

這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)點(diǎn)擊圖片放大預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

這個強(qiáng)大的API( wx.previewImage() )，接下來我們來講一下微信小程序中圖片點(diǎn)擊放大預(yù)覽的實(shí)現(xiàn)步驟！

思路：

1.點(diǎn)擊事件

2.放大

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

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

index.wxml

 <view class='topic_answerImg'>
  
 <block wx:for='{{item.answerImg}}' wx:key='index' wx:for-item='answerItem'>
 <image bindtap='topic_preview' data-id='{{item.id}}' data-url='{{answerItem}}' class='topic_answer_itemImg' src='{{answerItem}}'></image>
 </block>
 
</view>

注意：上面獲取的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鏈接列表
 })
 },

這樣就可以點(diǎn)擊圖片進(jìn)行預(yù)覽。

更多圖片處理教程請點(diǎn)擊下方專題參考學(xué)習(xí)：

javascript圖片處理專題

javascript圖片預(yù)覽專題

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

TensorFlow.js機(jī)器學(xué)習(xí)預(yù)測鳶尾花種類
TensorFlow.js是一個開源的基于硬件加速的JavaScript庫，用于訓(xùn)練和部署機(jī)器學(xué)習(xí)模型。本教程將會帶大家簡單了解和使用TensorFlow.js框架實(shí)現(xiàn)預(yù)測鳶尾花種類
2022-11-11
淺談監(jiān)聽單選框radio改變事件(和layui中單選按鈕改變事件)
今天小編就為大家分享一篇淺談監(jiān)聽單選框radio改變事件(和layui中單選按鈕改變事件)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
JS前端攻堅(jiān)淺析instanceof實(shí)現(xiàn)原理
這篇文章主要為大家介紹了JS前端攻堅(jiān)淺析instanceof實(shí)現(xiàn)原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
詳解JavaScript 中 if / if...else...替換方式
這篇文章主要介紹了JavaScript 中 if / if...else...替換方式，非常不錯，這篇文章是小編給大家做的一個方法匯總，感興趣的朋友一起看看吧
2018-07-07
簡單獲取鍵盤的KeyCode
簡單獲取鍵盤的KeyCode...
2006-09-09
基于javascript實(shí)現(xiàn)動態(tài)時鐘效果
這篇文章主要為大家詳細(xì)介紹了基于javascript實(shí)現(xiàn)動態(tài)時鐘效果的相關(guān)資料，動態(tài)顯示系統(tǒng)當(dāng)前時間，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-02-02
javascript 掃雷游戲
最近心血來潮，用JavaScript實(shí)現(xiàn)了Windows自帶的掃雷游戲。當(dāng)前只實(shí)現(xiàn)了基本功能，還有一個缺點(diǎn)就是只能在IE上正常運(yùn)行，估計(jì)是事件沒有處理好。
2009-05-05
Nautil 中使用雙向數(shù)據(jù)綁定的實(shí)現(xiàn)
這篇文章主要介紹了Nautil 中使用雙向數(shù)據(jù)綁定的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
深入理解javascript原型鏈和繼承
這篇文章主要介紹了javascript原型鏈和繼承的概念，以及使用原型鏈實(shí)現(xiàn)繼承、經(jīng)典繼承、組合式繼承、寄生組合式繼承。非常實(shí)用，是篇非常不錯的文章，這里推薦給大家。
2014-09-09
擴(kuò)展JavaScript功能的正確方法(譯文)
JavaScript已經(jīng)內(nèi)置了很多強(qiáng)大的方法，但有時你需要的某個功能在內(nèi)置的方法中沒有，我們怎么來優(yōu)雅地?cái)U(kuò)展JavaScript功能呢
2012-04-04