移动端展示类组件

展示类组件用于在页面上展示内容，包括标签、文本省略、徽标、进度条、环形进度条、日历、轮播、音频、视频、倒计时、水印、图片预览、空状态和操作结果等组件

标签

标签组件用于标记关键词和概括主要内容，运行效果如下图所示

• 提供默认、主要、成功、危险、警告等五种颜色
• 提供默认、空心、圆角、标记、可关闭等五种样式
• 支持自定义文本颜色和标签颜色

react 通过“动态隐藏”属性控制是否显示

vue 通过“显示”属性控制是否显示

标签提供点击事件，可关闭标签提供关闭事件，设计界面如下图所示

文本省略

文本省略组件展示文本内容过多的时候，隐去部分内容并用“…”替代，支持展开/收起，运行效果如下图所示

展示的行数、展示和收起的提示文字、省略号文字支持自定义，设计界面如下图所示

展示的行数默认为1

vant 徽标

徽标组件用于在右上角展示徽标数字或小红点，运行效果如下图所示

组件属性说明如下

• 徽标内容：支持数字和文字
• 定制徽标内容：可以自定义徽标的内容，比如插入一个图标
• 封顶数值：数值超过此值时，会自动显示为 {值}+
• 小红点：是否显示为小红点
• 显示0：徽标内容为0时，是否显示
• 徽标位置：支持左上、右上、左下、右下

进度条

进度条组件用于展示操作的当前进度，运行效果如下图所示

react

vue 支持渐变色

“百分比”属性用于设置当前进度，进度条粗细、进度条颜色、轨道颜色、进度文本及颜色等支持自定义

进度条颜色设置为 linear-gradient(to right, #be99ff, #7232dd) 可显示渐变色

环形进度条

环形进度条组件用于展示圆环形的进度条，支持进度渐变动画，运行效果如下图所示

“目标进度”属性用于设置当前进度，圆环直径、线条粗细（默认40）、进度条颜色（支持渐变色）、轨道颜色、动画速度、动画方向（顺时针、逆时针）、进度起始位置（顶部、底部、左侧、右侧）等支持自定义

日历

日历组件用于显示日历、选择日期或日期区间，运行效果如下图所示

选择类型

支持选择单个日期、多个日期和日期区间

• 类型设置为单选，是选择单个日期，此时必须设置绑定数据列，且列类型为日期。用户选择后，将日期存入该列
• 类型设置为多选，是选择多个日期，此时必须设置绑定数据列，且列类型为文本。显示确定按钮设置为是，用户选择多个日期后，点确定按钮完成选择。选择后将多个日期，以逗号分隔，存入该列
• 类型设置为范围，是选择日期范围，此时必须设置日期区间（关联数据集、开始时间、结束时间）。用户选择后，将起始日期存入开始时间列，将截止日期存入结束时间列

运行效果如下图所示

设计界面如下图所示

显示类型

• 弹层形式：“是”表示以弹出层显示，调用日历组件的显示操作；“否”表示直接显示
• 显示日历弹窗：弹层形式为是时显示该属性，react 需要设置为否，否则打开页面时会显示日历弹出层
• 起始日：设置一周从周几开始，默认从周日开始
• 最小日期和最大日期：定义日历的范围
• 区间最多可选天数

确认事件

选择单个日期、多个日期（点确定按钮），日期范围后，触发确认事件，事件参数 value 表示选择的日期，在确认事件中输出，如下图所示

确认事件的设计界面如下图所示

自定义日期文案

提供日期格式化函数，实现自定义日期文案。日期格式化函数提供 day 参数，day 包括如下属性

• date：当前渲染的日期，根据这个日期返回不同的文本和样式
• type：类型，start 表示开始日期，end 表示结束日期
• text：中间文本，默认显示日子
• topInfo：顶部文本
• bottomInfo：底部文本
• className：样式

日期格式化函数，设计界面如下图所示

案例一：自定义顶部文本、中间文本、底部文本

js 代码如下

let calendar1FormatterFn = (day) => {
    const month = day.date.getMonth() + 1;
    const date = day.date.getDate();
    if (month === 5) {
        if (date === 1) {
            day.topInfo = '劳动节';
        } else if (date === 4) {
            day.topInfo = '青年节';
        }
    }

    if (day.date.getFullYear() === (new Date()).getFullYear()
        && day.date.getMonth() === (new Date()).getMonth()
        && day.date.getDate() === (new Date()).getDate()) {
        day.text = "今天";
    }

    if (day.type === 'start') {
        day.bottomInfo = '入住';
    } else if (day.type === 'end') {
        day.bottomInfo = '离店';
    }
    return day;
}

运行效果如下图所示

案例二：自定义样式

本例：周六周日显示周末样式（粉底红色），1月1日显示“元旦”字样和周末样式。自定义日期文案的 js 代码如下：

react 代码

    calendar0FormatterFn = (day) => {
        if(day.date.getTime() === (new Date("2024-1-1")).getTime()){
            day.topInfo = "元旦";
            day.className = "c-weekend";
        }
        if(day.date.getDay()===0 || day.date.getDay()===6){
            day.className = "c-weekend";
        }
        return day;
    }

vue 代码

let calendar0FormatterFn = (day) => {
    if(day.date.getTime() === (new Date("2024-1-1")).getTime()){
        day.topInfo = "元旦";
        day.className = "c-weekend";
    }
    if(day.date.getDay()===0 || day.date.getDay()===6){
        day.className = "c-weekend";
    }
    return day;
}

上面使用了名为 c-weekend 的样式，实现周末样式，css 代码如下：

react 代码

    :global{
        .c-weekend{
            color: #EB3333;
            background-color: #FEF4F4;
            border-radius: 25px;
        }
    }

vue 代码

:deep{
    .c-weekend{
        color: #EB3333;
        background-color: #FEF4F4;
        border-radius: 10px;
    }
}

运行效果如下图所示

轮播

轮播组件用于循环播放一组图片或内容，运行效果如下图所示

常用属性如下：

• 设置列表：绑定数据组件，形成列表，内嵌轮播项
• 指示点：是否显示指示点
• vant 自动轮播间隔：为空则不自动播放，设置一个数字后自动播放
• vant 循环播放：是否循环播放
• vantui 自动切换：是否自动播放
• vantui 衔接滑动：“是”表示最后一页后，从同一个方向出现第一页，“否”表示最后一页后，往回倒，直到第一页
• 纵向：水平滚动或纵向滚动，纵向滚动时需要指定滑块容器的高度

轮播中显示图片和文本，页面结构如下图所示

轮播组件提供“跳转到”操作和方法，用于切换到某页，切换到第一页 js 代码如下

react 代码

this.comp("swiper0").setCurrent(0);

vue 代码

$page.comp("swipe0").swipeTo(0);

通知栏

通知栏组件用于循环播放展示一组消息通知，支持文字水平滚动播放，配合轮播组件，实现垂直滚动展示通知。运行效果如下图所示

组件属性说明如下

• 文本：通知内容
• 左侧图标
• 滚动播放：是否开启文字水平滚动

倒计时

倒计时组件用于实时展示倒计时数值，支持毫秒精度，运行效果如下图所示

时间属性表示倒计时总时长，单位为毫秒。格式化属性设置倒计时文本的内容，设计界面如下图所示

组件提供开始、暂停、重置3个操作和方法，用于实现手动控制

水印

水印组件用于在页面上添加特定的文字或图案作为水印，防止信息盗用。支持全屏显示和局部显示，运行效果如下面两幅图所示

水印可以显示文字或图片，显示图片时使用“透明度”属性设置水印的透明度。水印还可以设置宽度、高度、间距，倾斜角度等属性，设计界面如下图所示

局部水印设置方法：

• 在显示水印的容器内，添加水印组件
• 水印组件的是否全屏设置为否，如下图所示

• 水印组件父容器，增加 position:relative 样式，如下图所示

图片预览

图片预览组件用于全屏预览图片，运行效果如下图所示

图片预览组件绑定数据组件的一列，数据组件中包括多行数据，一个数据中包括一张图片，这些行中的图片形成多图循环展示。注意区别附件中显示的图片预览，附件组件绑定一行数据的一列，这个数据中包括多张图片。

图片预览组件提供“展示”操作和方法，用于进入全屏模式显示图片

空状态

空状态用于显示空状态时的占位提示，运行效果如下图所示

• 图片：支持默认、网络、搜索、错误等4种图片类型
• vant 图片大小：设置为数组格式，可以分别设置宽高。数组第一项对应宽度，数组第二项对应高度。不指定单位，默认为 px，指定单位，支持 rem, vh, vw
• 描述：用于设置描述文字

vantui 操作结果

操作结果组件用于对前一步操作的结果进行反馈，当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用，运行效果如下图所示

组件属性说明如下

• 文案：图标下面第一行的内容
• 副文案：文案下面的内容，可换行，建议不超过两行
• 额外内容：显示在下方的内容
• 内置类型：支持成功、错误、信息、警告、等待等5种图标

展示类组件

展示类组件提供很多属性用于界面展现和用户交互，鉴于官网介绍的比较详细，本文不再赘述。

案例位置

移动-页面-面板展示组件-*.w