小程序實現點擊圖片放大預覽功能
2018-03-19|HiShop
導讀：我們可以看到很多小程序，點擊圖片可以實現放大預覽，并且可以左右滑動圖片，這種情況是如何實現的，主要實現方式是什么呢?...
我們可以看到很多小程序，點擊圖片可以實現放大預覽，并且可以左右滑動圖片，這種情況是如何實現的，主要實現方式是什么呢?
小程序點擊圖片放大實現方式：使用微信小程序圖片預覽接口
我們可以看到api需要兩個參數，分別通過下面的data-list和data-src來傳到js中
wxml代碼：
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接口 里面即可
效果圖片如并且：并且可以左右滑動上一張下一張
HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。
更多小程序開發案例，盡在：http://www.gstsqh.com.cn/xiaocx/kaifa.html
小程序顯示圖片相關文章：
小程序加載圖片如何實現
小程序開發上傳圖片如何實現
小程序上傳圖片組件及上傳多張圖片
上一篇：微信小程序顯示圖片的實現實例 下一篇：小程序全屏展示圖片的實現方式
- 關注官方公眾號 -
提供多種電商軟件及解決方案