微信小程序图片预览功能的实现代码
程序员文章站
2022-03-04 11:56:32
...
图片预览是一个很普遍的功能,本文主要和大家详细介绍了微信小程序实现图片预览功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。
效果图
原理
使用wx.chooseImage选择本地图片;
使用wx.previewImage预览图片。
WXML
<view> <button bindtap="previewImage" type="primary">图片上传预览</button> <view class="tui-content"> <image class="tui-preview-img" wx:for="{{previewImageArr}}" bindtap="changePreview" src="{{item}}" src="{{item}}"></image> </view> </view>
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链接。
相关推荐:
jQuery使用uploadView如何实现图片预览上传功能的实例
以上就是微信小程序图片预览功能的实现代码的详细内容,更多请关注其它相关文章!
上一篇: 微信小程序之后台解密用户数据的示例分享
下一篇: 微信小程序之点击返回顶层的实现方法