微信小程序实现预览和左右滑动

微信小程序实现预览和左右滑动

效果图

• 预览前
  
• 预览时
  
  wxml代码如下

<!--pages/img/img.wxml-->
<!--src为当前图片路径,list为图片数组-->
<image src="{{imgList[0]}}" bindtap="imgClick" data-list="{{imgList}}" data-src="{{imgList[0]}}"></image>
<image src="{{imgList[1]}}" bindtap="imgClick" data-list="{{imgList}}" data-src="{{imgList[1]}}"></image>
<image src="{{imgList[2]}}" bindtap="imgClick" data-list="{{imgList}}" data-src="{{imgList[2]}}"></image>

JS代码如下

Page({
  data: {
    imgList: [
      "https://image.letterbook.cn/group1/M00/01/0F/rBESJV_YFDmAUuLhAASFD4eb9EI714.jpg",
      "https://image.letterbook.cn/group1/M00/01/0F/rBESJV_YFDmAC5eFAAPO8Ksw5YI647.jpg",
      "https://image.letterbook.cn/group1/M00/01/0F/rBESJV_YFDmAFfPtAAEYeEfTH04697.jpg"
    ]
  },
  //预览图片，放大预览
  imgClick(e){
    var src = e.currentTarget.dataset.src    // 图片路径
    var imgList = e.currentTarget.dataset.list // 图片数组
    wx.previewImage({
      current: src,
      urls: imgList
    })
  },
})

其实很简单，就是定义一个imgList图片数组。然后定义一个方法，在点击图片时实现图片放大预览的效果。
可以去微信开发文档里搜索wx.previewImage查看详细文档。