輕松建站 服務(wù)到位為客戶提供一體化網(wǎng)站設(shè)計(jì)服務(wù)
小程序開(kāi)發(fā)全功能小程序商城、開(kāi)發(fā)定制服務(wù)、全程售后服務(wù)、無(wú)憂備案
分享、交流、傳播知識(shí)分享、技術(shù)交流、經(jīng)驗(yàn)積累、提升能力
如果做HTML前端開(kāi)發(fā)的，實(shí)現(xiàn)點(diǎn)擊圖片放大的功能，這個(gè)可以使用彈出層即可實(shí)現(xiàn)，這樣是比較簡(jiǎn)單，但是如果要加上切換上一張或下一張，就得寫(xiě)JS代碼實(shí)現(xiàn)，當(dāng)然也有很多插件會(huì)實(shí)現(xiàn)這種功能。
寫(xiě)微信小程序開(kāi)發(fā)時(shí)就比較簡(jiǎn)單了，因?yàn)槲⑿判〕绦蛴兄苯犹峁〢PI功能實(shí)現(xiàn)，是使用wx.previewImage API功能，參數(shù)及使用方法，這里就不列出了，大家可以參考微信的開(kāi)發(fā)文檔，但用在實(shí)際場(chǎng)景中還是可以列出的，因?yàn)槲⑿挪](méi)有寫(xiě)出實(shí)例，所以有時(shí)候不在好消化吸收。
首先我們圖片列表需在當(dāng)前JS頁(yè)定義圖片數(shù)組列表，代碼如下：
data: {
com_img_list:['https://yii.wztm.net/wx/images/tg.png','https://yii.wztm.net/wx/images/logobanner.png'],
},
然后寫(xiě)綁定函數(shù)功能showimg,代碼如下：
showimg:function(e){
var that=this;
var imglist=that.data.com_img_list;
var index=e.currentTarget.dataset.index;
wx.previewImage({
current: imglist[index], // 當(dāng)前顯示圖片的http鏈接
urls: imglist // 需要預(yù)覽的圖片http鏈接列表
})
}
再在wxml文件中展示出來(lái)，并綁定點(diǎn)擊事件，代碼如下：
樣式wxss只需要對(duì)顯示部分定義就好，彈出部分不需要寫(xiě)樣式文件。
最后效果圖展示：
點(diǎn)擊后彈出效果圖：
可以通過(guò)左右滑動(dòng)進(jìn)行圖片切換，這個(gè)是真的非常方便呢。
