【微信小程序】--bindtap参数传递，配合wx.previewImage实现多张缩略图预览

本文为为原创博客，如需转载请注明出处

问题描述：

如何在在微信小程序实现多张缩略图预览？

话不多说直接上结果

预览小程序wxml中的多张缩略图



从本地的相册预览图片，类似微信发朋友圈时的预览效果。

尚未实现！！！未完待续！！多包涵！！

上代码

从wxml预览图片

<view class="right imgs" >
<view class="img" wx:for="{{item.info_file}}" wx:for-item="img" wx:key="img" id="img" bindtap='previewImg' id="img" data-imgs='{{item.info_file}}' data-currentimg="{{img}}">
<image src="{{server_host}}{{img}}"></image>
</view>
</view>

previewImg: function (event) {
var that =this;
console.log(event);
var imgs= event.currentTarget.dataset.imgs;
var temp=[];
for (var index in imgs){
temp = temp.concat(app.globalData.SERVER_HOST+imgs[index]);
}
wx.previewImage({
current: app.globalData.SERVER_HOST+event.currentTarget.dataset.currentimg,
urls: temp,
})
}

“{{item.info_file}}”存放的是缩略图片的地址的数组

wx:for-item=”img” 相当于循环中的每一个元素，在这里就是一张图片的地址。在小程序中item是默认的值。

bindtap传值得方式是通过data-*属性的方式来进行传值。此处用的是data-imgs在对应的js中通过imgs名称就可以得到传递过来的值。同理，此处的data-currentimg在js中就可以通过currentimg获取对应的值。

获取到图片地址数组和当前的点击的图片地址后。通过wx.previewImage即可事项图片的预览效果。

到此问题解决。