上一节:
下一节:

  小程序 预览图片

  • 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链接列表,必须是一个数组
    })
  },
})
    编译结果：
    01
    点击第一张图片，可以预览全屏预览大图，在真机上可以左右滑动预览下一张
    02
上一节:
下一节: