开发
API

tt.previewImage

基础库 1.0.0 开始支持本方法,这是一个异步方法。

预览一组图片。

语法

tt.previewImage(options)

参数说明

options 为 object 类型,属性如下:

属性名类型默认值必填说明最低支持版本
urlsstring[]需要预览的图片地址列表1.0.0
currentstringurls[0] 的内容当前显示图片的链接,不填则默认为 urls 中的第一张1.0.0
showmenubooleanfalse是否显示长按菜单, 菜单支持保存图片至本地相册2.48.0
successfunction接口调用成功后的回调函数1.0.0
failfunction接口调用失败后的回调函数1.0.0
completefunction接口调用结束后的回调函数(调用成功、失败都会执行)1.0.0

回调成功

object 类型,属性如下:

属性名类型说明最低支持版本
errMsgstring"previewImage:ok"1.0.0
invalidIdstring[]urls 中不合法的图片的索引2.48.0

回调失败

object 类型,属性如下:

属性名类型说明最低支持版本
errMsgstring"previewImage:fail" + 详细错误信息1.0.0
errNonumber错误码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 地址对应的第一张图片进行展示,可通过给图片地址增加 queryhash 值避免地址重复。
点击纠错
该文档是否对你的开发有所帮助?
有帮助
没帮助
该文档是否对你的开发有所帮助?
有帮助
没帮助