跳到主要内容

预览 Preview

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

安装使用

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

用法示例

基础用法

<view>
<ti-button bind:click="handleClick">预览</ti-button>
<ti-preview id="preview" />
</view>

隐藏标题和页码

<view>
<ti-button bind:click="handleClick">预览</ti-button>
<ti-preview id="preview" display-number="{{false}}" display-title="{{false}}" />
</view>

ti-preview API

属性 Properties

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

事件 Events

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

方法 Methods

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

CSS 变量 CSS Variables

变量默认值说明备注
--preview-positionfixed图片预览出现的位置-
--preview-z-index10000--
--preview-bg-color#000000--
--preview-content-box-z-index10002--
--preview-content-box-bottom96px--
--preview-content-box-left50%--
--preview-content-box-transformtranslateX(-50%)--
--preview-content-box-text-aligncenter--
--preview-text-colorvar(--neutral-color-9, #ffffff)--
--preview-title-colorvar(--preview-text-color, var(--neutral-color-9, #ffffff))--
--preview-serial-number-colorvar(--preview-text-color, var(--neutral-color-9, #ffffff))--
--preview-title-radiuscalc(var(--base-radius-size, 0px) + 8px)--
--preview-title-padding12px 24px--
--preview-serial-number-padding32px 0 0 0--
--preview-title-bg-colorvar(--preview-bg-color, #4d4d4d)--

数据结构 Data Structure

预览入参 IPreviewItem

字段类型必填默认值说明
fileTypeimage | video-文件类型
pathstring-文件链接
titlestring-预览标题
modestringaspectFit图片模式,更多请参考 小程序image mode属性