tt.previewImage
基础库 1.0.0 开始支持本方法，这是一个异步方法。
预览一组图片。
语法
tt.previewImage(options)参数说明
options 为 object 类型，属性如下：
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
|---|---|---|---|---|---|
| urls | string[] | 是 | 需要预览的图片地址列表 | 1.0.0 | |
| current | string | urls[0] 的内容 | 否 | 当前显示图片的链接，不填则默认为 urls 中的第一张 | 1.0.0 |
| showmenu | boolean | false | 否 | 是否显示长按菜单, 菜单支持保存图片至本地相册 | 2.48.0 |
| success | function | 否 | 接口调用成功后的回调函数 | 1.0.0 | |
| fail | function | 否 | 接口调用失败后的回调函数 | 1.0.0 | |
| complete | function | 否 | 接口调用结束后的回调函数（调用成功、失败都会执行） | 1.0.0 |
回调成功
object 类型，属性如下：
| 属性名 | 类型 | 说明 | 最低支持版本 |
|---|---|---|---|
| errMsg | string | "previewImage:ok" | 1.0.0 |
| invalidId | string[] | urls 中不合法的图片的索引 | 2.48.0 |
回调失败
object 类型，属性如下：
| 属性名 | 类型 | 说明 | 最低支持版本 |
|---|---|---|---|
| errMsg | string | "previewImage:fail" + 详细错误信息 | 1.0.0 |
| errNo | number | 错误码 | 2.48.0 |
扫码体验
请使用字节宿主APP扫码
代码示例
<!-- index.ttml -->
<image src="{{imageList[0]}}" mode="widthFix" bindtap="previewImage"></image>
<view>点击图片，预览大图</view>// index.js
Page({
data: {
imageList: [
"https://s3.pstatp.com/toutiao/static/img/logo.201f80d.png",
"https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/sdk/2016-europe.jpg",
],
},
previewImage() {
let { imageList } = this.data;
tt.previewImage({
current: imageList[0],
urls: imageList,
success: () => {
console.log("previewImage success");
},
fail: (err) => {
tt.showModal({
title: "预览失败",
content: err.errMsg,
showCancel: false,
});
},
complete: () => {
console.log("预览完成");
},
});
},
});Bug & Tip
- Tip：当
urls中存在多个相同的图片地址，预览时会选择current地址对应的第一张图片进行展示，可通过给图片地址增加query或hash值避免地址重复。
点击纠错
该文档是否对你的开发有所帮助？
有帮助
没帮助
该文档是否对你的开发有所帮助？
有帮助
没帮助