本文为原创随笔，纯属个人理解。如有错误，欢迎指出。

如需转载请注明出处

在微信小程序中预览图片分为


　　a、预览本地相册中的图片。


　　b、预览某个wxml中的多张图片。


分析：实质其实是一样的。都是给wx.previewImage传入参数

wx.previewImage{
current:''.//打开预览时要显示图片的地址。
urls:[],//需要预览的图片的地址数组。
}

 这里拿b、预览某个wxml中的图片列表来讲解bindtap的传值问题。a、预览本地相册。可以结合wx.chooseImage接口来实现，这里就不多说了。

直接上效果吧

 

上代码   

// 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>

// 对应js中bindtap函数的代码

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,
})
}

关键解释：

1. bindtap传值方式：通过data-*的方式传递参数。然后从相应函数的参数event中获取对应的值。此处使用data-imgs传递将要预览的图片的地址数组。则在相应函数中则通过event.currentTarget.dataset.imgs即可获得相应的值。同理data-currentimg。则是通过event.currentTarget.dataset.currentimg获取传入的值。