微信小程序如何實現(xiàn)點擊圖片放大功能
更新時間：2020年01月21日 10:19:00 作者：最初的樣子
這篇文章主要介紹了微信小程序如何實現(xiàn)點擊圖片放大功能,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
這篇文章主要介紹了微信小程序如何實現(xiàn)點擊圖片放大功能,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
WXML：
<view class='imgList'>
<view class='imgList-li' wx:for='{{imgArr}}'>
<image class='img' src='{{item}}' data-src='{{item}}' bindtap='previewImg'></image>
</view>
</view>
WXSS：
.imgList{
width: 100%;
}
.imgList .imgList-li{
width: 100%;
}
.imgList .imgList-li .img{
width: 400rpx;
height: 400rpx;
}
JS：
Page({
data: {
imgArr:[
'http://bpic.588ku.com/element_origin_min_pic/16/10/30/528aa13209e86d5d9839890967a6b9c1.jpg',
'http://bpic.588ku.com/element_origin_min_pic/16/10/30/54fcef525fa8f6037d180f3c26f3be65.jpg',
'http://bpic.588ku.com/element_origin_min_pic/16/10/30/62e3ca3a02dddb002eff00482078d194.jpg',
'http://bpic.588ku.com/element_origin_min_pic/16/10/31/c7167fcfb4ebcd12621c05b0c852e98e.jpg'
]
},
previewImg:function(e){
console.log(e.currentTarget.dataset.src);
let that = this;
wx.previewImage({
current:e.currentTarget.dataset.src, //當(dāng)前圖片地址
urls: that.data.imgArr, //所有要預(yù)覽的圖片的地址集合 數(shù)組形式
})
}
})
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript四種調(diào)用模式和this示例介紹
JavaScript調(diào)用時除了聲明時定義的形參外，每個函數(shù)接受兩個附加參數(shù)：this 和arguments，下面為大家介紹下JavaScript四種調(diào)用模式和this2014-01-01
JS Html轉(zhuǎn)義和反轉(zhuǎn)義（html編碼和解碼）的實現(xiàn)與使用方法總結(jié)
這篇文章主要介紹了JS Html轉(zhuǎn)義和反轉(zhuǎn)義（html編碼和解碼）的實現(xiàn)與使用方法,結(jié)合實例形式總結(jié)分析了JS Html轉(zhuǎn)義和反轉(zhuǎn)義、html編碼和解碼相關(guān)封裝類定義與具體使用技巧,需要的朋友可以參考下2020-03-03
這篇文章主要為大家詳細(xì)介紹了js調(diào)用刷新界面的幾種方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家詳細(xì)介紹了使用js實現(xiàn)瀑布流效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Bootstrap入門書籍之（四）菜單、按鈕及導(dǎo)航
這篇文章主要介紹了Bootstrap入門書籍之（四）菜單、按鈕及導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2016-02-02
JS中for...in?和?for...of?的區(qū)別解析
for?…?in?用于迭代對象的可枚舉字符串屬性,包括自身屬性和繼承的屬性,但不會遍歷對象的原型鏈上的?非可枚舉屬性,以及對象的方法,這篇文章主要介紹了JS中for...in?和?for...of?的區(qū)別,需要的朋友可以參考下2024-03-03
讓firefox支持IE的一些方法的javascript擴(kuò)展函數(shù)代碼
因為一些代碼，只能在IE下實現(xiàn)，如果用firefox實現(xiàn)就必須用一些擴(kuò)展函數(shù)。2010-01-01
斐波那契是自然界與社會中存在的一種數(shù)學(xué)規(guī)律,下面這篇文章主要給大家介紹了關(guān)于如何用typescript類型來推算斐波那契的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01
這篇文章主要為大家詳細(xì)介紹了javascript表單控件實例,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了基于canvas實現(xiàn)的絢麗圓圈效果,以完整實例形式分析了JavaScript結(jié)合html5的canvas實現(xiàn)動態(tài)圖形的繪制技巧,需要的朋友可以參考下2016-01-01