微信小程序实现图片预览功能
本文为大家分享了微信小程序实现图片预览的具体代码,供大家参考,具体内容如下
成都创新互联公司是一家专注于网站设计制作、成都网站设计与策划设计,广阳网站建设哪家好?成都创新互联公司做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:广阳等地区。广阳做网站价格咨询:18982081108
效果图
原理
- 使用wx.chooseImage选择本地图片;
- 使用wx.previewImage预览图片。
WXML
WXSS
page{background-color: #efeff4;} .tui-preview-img{ width: 200rpx; height: 120rpx; }
JS
Page({ 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链接。
DEMO下载
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
文章标题:微信小程序实现图片预览功能
分享网址:http://scyanting.com/article/gijjgp.html