微信小程序?qū)崿F(xiàn)圖片放大預(yù)覽功能

更新時(shí)間：2020年10月22日 10:37:35 作者：兔子先生i

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

需求：當(dāng)點(diǎn)擊圖片時(shí)，當(dāng)前圖片放大預(yù)覽，且可以左右滑動(dòng)

實(shí)現(xiàn)方式：使用微信小程序圖片預(yù)覽接口

我們可以看到api需要兩個(gè)參數(shù)，分別通過下面的data-list和data-src來傳到j(luò)s中

wxml代碼：

 <!--圖片描述-->
 <view wx:if="{{item.pictures}}" class="list-dImg">
 <image bindtap="imgYu" data-list="{{item.pictures}}" data-src="{{dImg}}" wx:for="{{item.pictures}}" wx:for-item="dImg" src="{{dImg}}"></image>
 </view>

js代碼：

//圖片點(diǎn)擊事件
 imgYu:function(event){
 var src = event.currentTarget.dataset.src;//獲取data-src
 var imgList = event.currentTarget.dataset.list;//獲取data-list
 //圖片預(yù)覽
 wx.previewImage({
 current: src, // 當(dāng)前顯示圖片的http鏈接
 urls: imgList // 需要預(yù)覽的圖片http鏈接列表
 })
 }

1.給圖片添加一個(gè)點(diǎn)擊事件(imgYu)

2.使用event.currentTarget.dataset.自定義屬性名稱來獲取data-的值如event.currentTarget.dataset.src (獲取data-src的值)

3.之后將獲取的兩個(gè)值放到wx.previewImage接口里面即可

效果圖片如下：可以左右滑動(dòng)上一張下一張

更多內(nèi)容可以查看：微信小程序教程

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

您可能感興趣的文章:

相關(guān)文章

javascript奇異的arguments分析
在 Javascript 的函數(shù)中有個(gè)名為 arguments 的類數(shù)組對象。它看起來是那么的詭異而且名不經(jīng)傳，但眾多的 Javascript 庫都使用著它強(qiáng)大的功能。所以，它的特性需要每個(gè) Javascript 程序員去熟悉它。
2010-10-10
JS和jQuery通過this獲取html標(biāo)簽中的屬性值(實(shí)例代碼)
本文通過實(shí)例代碼給大家分享JS和jQuery通過this獲取html標(biāo)簽中的屬性值，非常不錯(cuò)，具有參考借鑒價(jià)值，需要額朋友參考下吧
2017-09-09
Javascript解決常見瀏覽器兼容問題的12種方法
我們提倡盡可能使用CSS，而且我們常常能做到這一點(diǎn)?，F(xiàn)代瀏覽器有很好的CSS支持-這無疑足夠好讓你使用CSS來控制布局和版面設(shè)計(jì)。但是有時(shí)候，某些網(wǎng)頁元素在不同的瀏覽器會(huì)出現(xiàn)不同。
2010-01-01
JavaScript實(shí)現(xiàn)兩個(gè)Table固定表頭根據(jù)頁面大小自行調(diào)整
正如標(biāo)題所言兩個(gè)Table固定表頭，可根據(jù)頁面大小自行調(diào)整使用JavaScript實(shí)現(xiàn)，具體的示例如下，感興趣的朋友可以參考下
2014-01-01
JavaScript制作簡單網(wǎng)頁計(jì)算器
這篇文章主要為大家詳細(xì)介紹了JavaScript制作簡單網(wǎng)頁計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
javascript中CheckBox全選終極方案
在javascript頁面中實(shí)現(xiàn)CheckBox或者Radio的選中狀態(tài)是一件很容易的事情，下面我們來給大家展示下在asp.net中使用javascript中CheckBox全選終極方案，有需要的小伙伴可以參考下。
2015-05-05
JavaScript DOM元素常見操作詳解【添加、刪除、修改等】
這篇文章主要介紹了JavaScript DOM元素常見操作,包括針對dom元素的添加、刪除、修改等相關(guān)操作實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下
2018-05-05
Javascript實(shí)現(xiàn)秒表計(jì)時(shí)游戲
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)秒表計(jì)時(shí)游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-05-05
小程序?qū)崿F(xiàn)搜索框
搜索框無論是在電商網(wǎng)站還是小程序中都很常見，這篇文章主要就為大家詳細(xì)介紹了小程序如何實(shí)現(xiàn)搜索框，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-07-07
原生js實(shí)現(xiàn)圖片輪播特效
這篇文章主要介紹了原生js實(shí)現(xiàn)圖片輪播特效，適合用于商品展示，實(shí)現(xiàn)最簡單的廣告輪播效果，感興趣的小伙伴們可以參考一下
2015-12-12