小程序点击图片时,当前图片放大预览,且可以左右滑动
实现方式:使用微信小程序图片预览接口
我们可以看到api需要两个参数,分别通过下面的data-list和data-src来传到js中
wxml代码:
<span wx:for="{{ImgList}}" wx:key="key" data-index="{{index}}">
<image src="{{item}}" bindtap="imgYu" data-list="{{Order400.ImgList}}" data-src="{{item}}" mode="widthFix"></image>
</span>
js代码:
imgYu: function (event) {
var src = event.currentTarget.dataset.src; //获取data-src
var imgList = event.currentTarget.dataset.list; //获取data-list
//图片预览
wx.previewImage({
current: src, // 当前显示图片的http链接
urls: imgList // 需要预览的图片http链接列表
})
}