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