微信小程序实现图片预览功能

原理

使用wx.chooseImage选择本地图片；

使用wx.previewImage预览图片。

WXML

<view> <button bindtap="previewImage" type="primary">图片上传预览</button> <view> <image wx:for="{{previewImageArr}}" bindtap="changePreview" data-src="https://www.jb51.net/{{item}}" src="https://www.jb51.net/{{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链接。