预览 Preview

用来预览多张图片，支持左右滑动，不支持双指放大、缩小。

使用

API

安装使用

{
  // 原生小程序
  "usingComponents": {
    "ti-preview": "@titian-design/weapp/preview/index"
  },
  // titan-cli搭建的项目
  "usingComponents": {
    "ti-preview": "platform://titian-mp/ti-preview",
  }
}

用法示例

基础用法

展示预览

• App.wxml
• index.js

code

copy

code

<ti-button bind:click="clickHandler">展示预览</ti-button>
<ti-preview id="previewRef" />

copy

code

Page({
  clickHandler() {
    this.selectComponent('#previewRef').show([
      {
        fileType: 'image',
        title: '预览标题',
        path: 'https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default1.png',
      },
    ]);
  },
});

隐藏标题和页码

展示预览

• App.wxml
• index.js

code

copy

code

<ti-button @click="clickHandler">展示预览</ti-button>
<ti-preview id="previewRef" displayNumber="{{false}}" displayTitle="{{false}}" />

copy

code

Page({
  clickHandler() {
    this.selectComponent('#previewRef').show([
      {
        fileType: 'image',
        title: '预览标题',
        path: 'https://cdn2.weimob.com/saas/@assets/saas-fe-retail-h5-stc/image/titian/default1.png',
      },
    ]);
  },
});

ti-preview API

属性 Properties

名称	类型	必填	默认值	说明	备注
display-number	boolean	否	true	是否展示页码	-
display-title	boolean	否	true	是否展示上方的标题	-

事件 Events

名称	参数列表	描述	备注
bind:change	(e: WechatMiniprogram.CustomEvent<{ current: number, item: any }>) => void	预览图片切换触发的事件	-

方法 Methods

方法名	说明	参数列表	返回值	备注
show	实例方法，展示预览图	(IPreviewItem, index) => void	-	index 为默认展示项的索引

CSS 变量 CSS Variables

变量	默认值	说明	备注
--preview-position	fixed	图片预览出现的位置	-
--preview-z-index	10000	-	-
--preview-bg-color	#000000	-	-
--preview-content-box-z-index	10002	-	-
--preview-content-box-bottom	96px	-	-
--preview-content-box-left	50%	-	-
--preview-content-box-transform	translateX(-50%)	-	-
--preview-content-box-text-align	center	-	-
--preview-text-color	theme.color.gray.background.default	-	-
--preview-title-color	theme.color.gray.background.default	-	-
--preview-serial-number-color	theme.color.gray.background.default	-	-
--preview-title-padding	12px 24px	-	-
--preview-serial-number-padding	32px 0 0 0	-	-
--preview-title-bg-color	var(--preview-bg-color, #4d4d4d)	-	-
--preview-serial-number-font-size	theme.fontSize.t5	-	-
--preview-serial-number-line-height	theme.lineHeight.single.t4	页码数字文字行高	-
--preview-title-font-size	theme.fontSize.t6	预览标题大小	-
--preview-title-line-height	theme.lineHeight.single.t8	预览标题行高	-
--preview-title-font-weight	theme.fontWeight.semibold	预览标题字重	-
--preview-title-radius	theme.borderRadius.r2	预览标题块的圆角	-

数据结构 Data Structure

预览入参 IPreviewItem

字段	类型	必填	默认值	说明
fileType	image | video	否	-	文件类型
path	string	否	-	文件链接
title	string	否	-	预览标题
mode	string	否	aspectFit	图片模式，更多请参考 小程序image mode属性