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

2018-03-19|HiShop

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

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

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

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

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

　　wxml代碼：

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

　　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)上一張下一張

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

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

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

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