小程序 预览图片

• 

  wx.previewImage(Object object)

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

  参数

  属性	类型	默认值	必填	说明
  urls	Array.<string>		是	需要预览的图片链接列表。2.2.3 起支持云文件ID。
  current	string	urls 的第一张	否	当前显示图片的链接
  success	function		否	接口调用成功的回调函数
  fail	function		否	接口调用失败的回调函数
  complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

• 

  示例

  index.wxml

  //index.wxml
  <view class="container">
    <view class="img-box">
      <block wx:for="{{imgList}}" :wx:key="id">
        //bindtap绑定事件，data-src当前item
        <image bindtap="onPreviewImage" data-src="{{item}}" src="{{item}}"></image>
      </block>
    </view>
  
  
  

  index.wxss

  //index.wxss
  .container {
      width: 100%;
   }
  
   .img-box {
       display: flex;
       width: 100%;
       justify-content: space-between;
   }
   .img-box image{
     width: 200rpx;
     height: 200rpx;
   }
  
  
  

  使用了flex布局，可以了解更多flex知识

  index.js

  //index.js
  Page({
    data: {
      imgList: [
        'https://img30.360buyimg.com/babel/s590x470_jfs/t1/123502/34/426/95538/5eb5274eE4c9bf500/304bcdca4df6dd40.jpg.webp',
        'https://img12.360buyimg.com/pop/s590x470_jfs/t1/126177/23/997/97575/5eb8eab0E265678bb/7191926de2a83818.jpg.webp',
        'https://img13.360buyimg.com/pop/s590x470_jfs/t1/120129/35/1130/104524/5eb980c4Ef2e8b956/f24f52b09853f0fa.jpg.webp'
      ]
    },
  
    onPreviewImage(e) {
      wx.previewImage({
        current: e.currentTarget.dataset.src, // 获取当前显示图片的http链接
        urls: this.data.imgList // 需要预览的图片http链接列表,必须是一个数组
      })
    },
  })
  
  
  

  编译结果：

  

  点击第一张图片，可以预览全屏预览大图，在真机上可以左右滑动预览下一张