微信小程序?qū)崿F(xiàn)圖片放大預(yù)覽功能
更新時間：2020年10月22日 10:37:35 作者：兔子先生i
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)圖片放大預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
需求：當(dāng)點(diǎn)擊圖片時，當(dāng)前圖片放大預(yù)覽，且可以左右滑動
實現(xiàn)方式：使用微信小程序圖片預(yù)覽接口
我們可以看到api需要兩個參數(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.給圖片添加一個點(diǎn)擊事件(imgYu)
2.使用event.currentTarget.dataset.自定義屬性名稱 來獲取data-的值 如event.currentTarget.dataset.src (獲取data-src的值)
3.之后將獲取的兩個值 放到wx.previewImage接口 里面即可
效果圖片如下：可以左右滑動上一張下一張
更多內(nèi)容可以查看：微信小程序教程
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 微信小程序選擇圖片和放大預(yù)覽圖片功能
- 微信小程序?qū)崿F(xiàn)圖片上傳、刪除和預(yù)覽功能的方法
- 微信小程序 解決請求服務(wù)器手機(jī)預(yù)覽請求不到數(shù)據(jù)的方法
- 微信小程序圖片選擇、上傳到服務(wù)器、預(yù)覽（PHP）實現(xiàn)實例
- 微信小程序wx.previewImage預(yù)覽圖片實例詳解
- 微信小程序?qū)崿F(xiàn)點(diǎn)擊圖片放大預(yù)覽
- 微信小程序點(diǎn)擊圖片實現(xiàn)長按預(yù)覽、保存、識別帶參數(shù)二維碼、轉(zhuǎn)發(fā)等功能
- 微信小程序?qū)崿F(xiàn)圖片選擇并預(yù)覽功能
- 微信小程序?qū)崿F(xiàn)預(yù)覽圖片功能
- 微信小程序?qū)崿F(xiàn)文件預(yù)覽
相關(guān)文章
鼠標(biāo)點(diǎn)擊input,顯示瞬間的邊框顏色,對之修改與隱藏實例
下面小編就為大家?guī)硪黄髽?biāo)點(diǎn)擊input,顯示瞬間的邊框顏色,對之修改與隱藏實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-12-12
使用mock.js隨機(jī)數(shù)據(jù)和使用express輸出json接口的實現(xiàn)方法
這篇文章主要介紹了使用mock.js隨機(jī)數(shù)據(jù)和使用express輸出json接口的實現(xiàn)方法,需要的朋友可以參考下2018-01-01
Echarts中常用的參數(shù)總結(jié)及參數(shù)自定義示例代碼
Echarts中參數(shù)的配置功能很強(qiáng)大,對任何一項的配置都很細(xì)致,下面這篇文章主要給大家介紹了關(guān)于Echarts中常用的參數(shù)總結(jié)及參數(shù)自定義的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)登錄與注冊界面，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
用js+cookie記錄滾動條位置...2007-01-01
今天小編就為大家分享一篇在layui中select更改后生效的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
最近在學(xué)習(xí)three.js，將學(xué)習(xí)中遇到的知識點(diǎn)總結(jié)分享出來，下面這篇文章主要給大家介紹了關(guān)于Three.js利用頂點(diǎn)繪制立方體的方法，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09
關(guān)于JavaScript中的Delete一直沒有弄的很清楚，最近看到兩篇這方面的文章，現(xiàn)對兩文中部分內(nèi)容進(jìn)行翻譯(內(nèi)容有修改和添加，順序不完全一致，有興趣推薦看原文)，希望能對大家有所幫助2012-09-09
本篇文章主要介紹了通過sails和阿里大于實現(xiàn)短信驗證的方法。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
通用的javascript 換行色換列色的小js...2007-04-04