小程序 预览图片



  • 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