微信小程序图片预览（wx.previewImage(Object object)

在微信小程序的开发过程中，有时候我们会遇到这样的需求，点击图片可预览图片，并且可以左右滑动等相关操作，此时我们可以使用微信给我们提供的相关API来实现，具体实现方式如下：

wx.previewImage(Object object)

在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。

https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.html  微信api地址

效果图如下：

wxml：

<view class="area-middle" bindtap="gocommentDetail">
		<text>这件商品真的是挺好的</text>
		<view  class="comimg-box">
			<image src="{{item}}"  data-src="{{item}}"  data-list="{{imgArr}}" wx:for="{{imgArr}}" catchtap="pictureview" wx:key="index" ></image>
		</view>
	</view>

js:

Page({
  data: {
    isActive:0,
    imageNum:3,
    imgArr:[
     'https://xyylcdn.weein.cn/group1/M00/06/BF/rBUgBF8WtdWAKPOrAABgCedJ7gk388.jpg',
     'https://xyylcdn.weein.cn/group1/M00/06/BF/rBUgBF8WtyuASPvRAABkG1TAPl8877.jpg',
     'https://xyylcdn.weein.cn/group1/M00/04/19/rBUUDl78bAyAUgpEAAMr1h87H1A753.jpg'
    ]
  },
  onLoad: function (options) {

  },
  changeEvent:function(e){
    var getStatus = e.currentTarget.dataset;
    if(getStatus.status == 1){
      this.setData({
        isActive:getStatus.status
      })
    }else{
      this.setData({
        isActive:getStatus.status
      })
    }
  },
  pictureview:function(event){
    var src = event.currentTarget.dataset.src;//获取data-src
    var imgList = event.currentTarget.dataset.list;//获取data-list
    wx.previewImage({
      current: src, // 当前显示图片的http链接
      urls: imgList // 需要预览的图片http链接列表
    })
  },
  gocommentDetail:function(){
    wx.navigateTo({
      url: '/pages/commentsDetail/commentsDetail'
    })
  },
  manageStr:function(str){
    let postStr;
    if(str){
      postStr=str.substr(0,1)+'****'+str.substr(str.split('').length-1,str.split('').length);
    }
    return postStr;
  },
  onShow: function () {

  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

以上就是改功能的实现方式，如果对你有帮助的话，点个赞吧！欢迎交流