小程序?qū)崿F(xiàn)點擊圖片放大預覽功能

2018-03-19|HiShop

導讀：我們可以看到很多小程序，點擊圖片可以實現(xiàn)放大預覽，并且可以左右滑動圖片，這種情況是如何實現(xiàn)的，主要實現(xiàn)方式是什么呢?...

　　我們可以看到很多小程序，點擊圖片可以實現(xiàn)放大預覽，并且可以左右滑動圖片，這種情況是如何實現(xiàn)的，主要實現(xiàn)方式是什么呢?

　　小程序點擊圖片放大實現(xiàn)方式：使用微信小程序圖片預覽接口

小程序?qū)崿F(xiàn)點擊圖片放大預覽功能

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

　　wxml代碼：

　小程序?qū)崿F(xiàn)點擊圖片放大預覽功能

　　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接口里面即可

　　效果圖片如并且：并且可以左右滑動上一張下一張

小程序?qū)崿F(xiàn)點擊圖片放大預覽功能

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。

更多小程序開發(fā)案例，盡在：http://m.descansotropical.com/xiaocx/kaifa.html

上一篇：微信小程序顯示圖片的實現(xiàn)實例 下一篇：小程序全屏展示圖片的實現(xiàn)方式