微信小程序画册浏览功能

编写前端页面

在wxml文件中添加以下代码：
其中，“bindtap”绑定了一个名称为“previewImage”的函数

<view class="pic-wrapper">
  <block wx:for="{{picList}}" wx:key="index" wx:for-item="item">
    <image src="{{item}}" mode="aspectFit" bindtap="previewImage"></image>
  </block>
</view>

在wxss文件中添加以下代码：

/* pages/map/map.wxss */

.pic-wrapper{
  width: 100%;
  height: 100%;
  position: relative;
}

在js文件中添加以下代码：
定义数据 [ 其中，“picList”是存储图片链接的数组。]
定义函数

Page({
  data: {
    picList: [
    "https://img0.baidu.com/it/u=3956990438,256522815&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889",
    "https://img1.baidu.com/it/u=2414914860,2617703686&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889",
    "https://img1.baidu.com/it/u=1320795582,839019869&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889",
    "https://img1.baidu.com/it/u=3214529205,2622974616&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=500"
    ]
  },
  previewImage: function(event) {
    var current = event.target.dataset.src;
    wx.previewImage({
      current: current,
      urls: this.data.picList
    });
  }
})

在该函数中，我们使用了微信小程序的预览图片API，并传入当前预览的图片链接和图片数组。

效果如下：