微信小程序如何實(shí)現(xiàn)點(diǎn)擊圖片放大功能

更新時(shí)間：2020年01月21日 10:19:00 作者：最初的樣子

這篇文章主要介紹了微信小程序如何實(shí)現(xiàn)點(diǎn)擊圖片放大功能,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

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ù)組形式
  })
 }
})

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

您可能感興趣的文章:

相關(guān)文章

JavaScript四種調(diào)用模式和this示例介紹
JavaScript調(diào)用時(shí)除了聲明時(shí)定義的形參外，每個(gè)函數(shù)接受兩個(gè)附加參數(shù)：this 和arguments，下面為大家介紹下JavaScript四種調(diào)用模式和this
2014-01-01
JS Html轉(zhuǎn)義和反轉(zhuǎn)義（html編碼和解碼）的實(shí)現(xiàn)與使用方法總結(jié)
這篇文章主要介紹了JS Html轉(zhuǎn)義和反轉(zhuǎn)義（html編碼和解碼）的實(shí)現(xiàn)與使用方法,結(jié)合實(shí)例形式總結(jié)分析了JS Html轉(zhuǎn)義和反轉(zhuǎn)義、html編碼和解碼相關(guān)封裝類定義與具體使用技巧,需要的朋友可以參考下
2020-03-03
js調(diào)用刷新界面的幾種方式
這篇文章主要為大家詳細(xì)介紹了js調(diào)用刷新界面的幾種方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
使用js實(shí)現(xiàn)瀑布流效果
這篇文章主要為大家詳細(xì)介紹了使用js實(shí)現(xiàn)瀑布流效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
Bootstrap入門書籍之（四）菜單、按鈕及導(dǎo)航
這篇文章主要介紹了Bootstrap入門書籍之（四）菜單、按鈕及導(dǎo)航的相關(guān)資料,需要的朋友可以參考下
2016-02-02
JS中for...in?和?for...of?的區(qū)別解析
for?…?in?用于迭代對(duì)象的可枚舉字符串屬性,包括自身屬性和繼承的屬性,但不會(huì)遍歷對(duì)象的原型鏈上的?非可枚舉屬性,以及對(duì)象的方法,這篇文章主要介紹了JS中for...in?和?for...of?的區(qū)別,需要的朋友可以參考下
2024-03-03
讓firefox支持IE的一些方法的javascript擴(kuò)展函數(shù)代碼
因?yàn)橐恍┐a，只能在IE下實(shí)現(xiàn)，如果用firefox實(shí)現(xiàn)就必須用一些擴(kuò)展函數(shù)。
2010-01-01
教你用typescript類型來推算斐波那契
斐波那契是自然界與社會(huì)中存在的一種數(shù)學(xué)規(guī)律,下面這篇文章主要給大家介紹了關(guān)于如何用typescript類型來推算斐波那契的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-01-01
javascript表單控件實(shí)例講解
這篇文章主要為大家詳細(xì)介紹了javascript表單控件實(shí)例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
基于canvas實(shí)現(xiàn)的絢麗圓圈效果完整實(shí)例
這篇文章主要介紹了基于canvas實(shí)現(xiàn)的絢麗圓圈效果,以完整實(shí)例形式分析了JavaScript結(jié)合html5的canvas實(shí)現(xiàn)動(dòng)態(tài)圖形的繪制技巧,需要的朋友可以參考下
2016-01-01