小程序 预览图片
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>
<view>
<block wx:for="{{imgList}}" :wx:key="id">
//bindtap绑定事件，data-src当前item
<image bindtap="onPreviewImage" src="https://www.jc2182.com/xiaochengxu/{{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链接列表,必须是一个数组
})
},
})
编译结果：
点击第一张图片，可以预览全屏预览大图，在真机上可以左右滑动预览下一张