这篇文章主要为大家详细介绍了微信小程序实现图片预览功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文为大家分享了微信小程序实现图片预览的具体代码,供大家参考,具体内容如下
效果图
原理使用wx.chooseImage选择本地图片;
使用wx.previewImage预览图片。
WXML
图片上传预览
WXSSpage{background-color: #efeff4;}
.tui-preview-img{
width: 200rpx;
height: 120rpx;
}
JSPage({
data: {
previewImageArr:[]
},
previewImage(e){
var self = this;
wx.chooseImage({
count:8,
success(res) {
var tempFilePaths = res.tempFilePaths;
self.setData({ previewImageArr: tempFilePaths});
}
})
},
changePreview(e){
var self = this;
wx.previewImage({
current: e.currentTarget.dataset.src,
urls: self.data.previewImageArr
})
}
})
注意
wx.previewImage的参数current和urls必须是http链接。
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章: