小程序点击图片预览多张图片代码
时间: 2023-10-02 14:11:07 浏览: 71
以下是一个基于微信小程序的点击图片预览多张图片的代码示例:
WXML代码:
```
<view class="image-container">
<view wx:for="{{images}}" wx:key="{{index}}">
<image src="{{item}}" mode="aspectFit" data-src="{{item}}" bindtap="previewImage"></image>
</view>
</view>
```
JS代码:
```
Page({
data: {
images: ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg']
},
previewImage: function(event) {
var current = event.currentTarget.dataset.src;
wx.previewImage({
current: current,
urls: this.data.images
})
}
})
```
上述代码会将四张图片放在一个名为“image-container”的view容器中,使用wx:for循环渲染每张图片。每张图片使用了bindtap事件,当用户点击图片时,会调用previewImage方法进行图片预览。previewImage方法会使用wx.previewImage方法来预览图片,其中current参数为当前点击的图片路径,urls参数为所有图片的路径数组。这样就可以实现在微信小程序中点击图片预览多张图片的功能。
阅读全文