最近在写小程序,有一个功能是,点击头像查看大图,用微信 previewImage实现。
image.png
最开始思路,用参数传递图片url,如
<img src="{{url}}" @tap="previewImg(url)" />
但是由于后台返回的url实在不友好,类似于
detail.images[0].image_url
由于数组的存在,导致错误。其实只有一张图片,非要这么传,我也很无奈,所以只能换另外一种方式。即dataset。
使用dataset就必须使用”事件对象event“获取数据。最开始是这样写的:
<image
class="avatar"
mode="aspect-Fill"
src="{{detail.images[0].image_url}}"
data-url="{{detail.images[0].image_url}}"
@tap="previewImg()"
/>
事件处理函数是这样的:
previewImg(e) {
let url = e.currentTarget.dataset.url
let urls = []
urls.push(url)
wx.previewImage({
current: url,
urls: urls
})
}
怎么都获取不到e对象,报”Cannot read property 'dataset' of undefined“。网上也没有找到可行的办法。最终费了九牛二虎之力,终于知道,原来是绑定事件时不应该用圆括号。如下(重点@tap="previewImg"):
<image
class="avatar"
mode="aspect-Fill"
src="{{detail.images[0].image_url}}"
data-url="{{detail.images[0].image_url}}"
@tap="previewImg"
/>
问题解决!
网友评论