h5 img js 點選圖檔放大_微信小程式實作點選圖檔放大功能代碼示例

這篇文章主要介紹了微信小程式如何實作點選圖檔放大功能,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

WXML：

WXSS：

.imgList{

width: 100%;

}

.imgList .imgList-li{

width: 100%;

}

.imgList .imgList-li .img{

width: 400rpx;

height: 400rpx;

}

JS：

Page({

data: {

imgArr:[

'/wp-content/uploads/aaacj/20200227/427.jpg',

'/wp-content/uploads/aaacj/20200227/428.jpg',

'/wp-content/uploads/aaacj/20200227/429.jpg',

'/wp-content/uploads/aaacj/20200227/430.jpg'

]

},

previewImg:function(e){

console.log(e.currentTarget.dataset.src);

let that = this;

wx.previewImage({

current:e.currentTarget.dataset.src, //目前圖檔位址

urls: that.data.imgArr, //所有要預覽的圖檔的位址集合 數組形式

})

}

})

以上就是微信小程式實作點選圖檔放大功能代碼示例全部内容，希望對大家的學習有所幫助。