页面结构
注意:目前微信小程序事件里尚无法直接获取 image.src
,可以通过 data-*
数据标签曲线救国。
wxml:
<van-cell title="营业执照" >
<image lazy-load model:src="{{storeDetail.businessLicense}}" bindtap="previewSqs" data-src="{{storeDetail.businessLicense}}"></image>
</van-cell>
<van-cell title="签订合同">
<image lazy-load src="{{storeDetail.contract}}" bindtap="previewSqs" data-src="{{storeDetail.contract}}"></image>
</van-cell>
JS代码
previewSqs(event) {
var currentUrl = event.currentTarget.dataset.src
wx.previewImage({
current: currentUrl, // 当前显示图片的http链接
urls: [currentUrl] // 需要预览的图片http链接列表
})
},
页面效果
问题一:图片预览加载失败
经过尝试,此接口只支持 http 或者 https 协议的网络图片地址,不支持本地图片,使用本地图片时会出现如下效果。
解决方法:使用http 或者 https 协议的网络图片地址。
问题二:真机调试时点击图片预览没有任何反应
真机调试时点击图片预览没有任何反应,也不触发任何成功或者失败的回调。在模拟器上能够预览成功,也能触发回调。
解决方法:真机调试时切换成真机调试1.0。