滚动进度条

⭐明星组件

TuiRollingProgress 是一个专用于展示动态数据列表的复合组件。 它完美结合了 TuiRolling 的无缝滚动引擎和 TuiProgress 的进度展示能力。非常适合用于构建销售排行榜、实时产能监控或Top N 数据大屏。

基础用法

基础列表

使用 TuiRollingProgress 包裹 TuiRollingProgressItem。 需指定 visibleLength 来控制视口内显示的条数。

<script setup>
import { ref } from 'vue';

const dataList = ref([
  { label: "数据中心 A", value: 35 },
  { label: "数据中心 B", value: 68 },
  { label: "数据中心 C", value: 89 },
  { label: "数据中心 D", value: 45 },
  { label: "数据中心 E", value: 12 }
]);
</script>

<template>
  <div style="height: 300px">
    <TuiRollingProgress :visibleLength="4" autoRolling seamless>
      <TuiRollingProgressItem 
        v-for="(item, index) in dataList" 
        :key="index"
        :label="item.label"
        :value="item.value"
      />
    </TuiRollingProgress>
  </div>
</template>

数据可视化配置

通过 progressConfig 属性，可以统一配置内部所有进度条的行为，如数值类型、单位和颜色阈值。

数值与单位

• valueType: 'percent' (默认 0-100) 或 'number' (绝对数值)。
• unit: 数值后缀单位。

<TuiRollingProgress 
  :progressConfig="{ 
    valueType: 'number', 
    unit: '万元' 
  }"
>
  ...
</TuiRollingProgress>

智能颜色阈值

支持配置 thresholds 对象，根据数值自动改变进度条颜色。 例如：低于 30 为 danger，高于 70 为 success。

<script setup>
const myThresholds = {
  danger: 0,    // 0-30 红色
  warning: 30,  // 30-50 黄色
  normal: 50,   // 50-70 蓝色
  success: 70   // 70+ 绿色
};
</script>

<template>
  <TuiRollingProgress 
    :progressConfig="{ thresholds: myThresholds }"
  >
    ...
  </TuiRollingProgress>
</template>

排名与序号

组件内置了排行榜样式支持。

• hasIndex: 是否在左侧显示序号。
• showRankings: 是否开启前三名高亮特效（金银铜牌样式）。

<TuiRollingProgress 
  :visibleLength="5" 
  hasIndex 
  showRankings 
>
  <TuiRollingProgressItem 
    v-for="(item, index) in list" 
    :index="index + 1" 
    v-bind="item" 
  />
</TuiRollingProgress>

滚动控制

继承自 TuiRolling 的强大控制能力：

• mode: 'item' (逐条滚动) / 'page' (整页滚动)。
• seamless: 是否开启无缝循环。
• interval: 滚动间隔 (ms)。
• motionBlur: 开启动态模糊，提升快速滚动的视觉流畅度。

API 参考

TuiRollingProgress Props

属性名	类型	默认值	说明
visibleLength	Number	1	必填。可视区域内显示的条数。
interval	Number	-	自动滚动间隔 (ms)。
mode	String	'item'	滚动模式。可选：item, page。
seamless	Boolean	true	是否开启无缝循环滚动。
showControl	Boolean	true	是否显示翻页控制栏。
motionBlur	Boolean	true	是否开启动态模糊。
hasIndex	Boolean	false	是否显示序号。
showRankings V0.0.6+	Boolean	false	是否开启排名高亮样式（前三名特殊样式）。
progressConfig	Object	-	统一配置内部进度条 (valueType, unit, thresholds, color)。
tagConfig	Object	-	统一配置序号 Tag 的样式。
tipConfig	Object	-	统一配置提示信息的样式。
resizeObserver	String	'global'	尺寸监听策略。

TuiRollingProgressItem Props

属性名	类型	默认值	说明
label	String	Required	进度条标签/名称。
value	Number	Required	进度数值。
index	Number	-	排名序号（用于 hasIndex 显示）。
status	String	-	强制指定状态颜色 (success, warning, danger 等)。
color	String	-	强制指定自定义颜色 (CSS 颜色值)。
icon	String	-	标签旁的图标类名。
showStatusIcon	Boolean	false	是否显示状态图标。

Emits

事件名	说明	回调参数
start	滚动开始时触发。	-
rolling	滚动过程中持续触发。	(offset)

致谢

Jiaming743

DataV scrollRankingBoard

此组件是受@jiaminghi/data-view组件库中的 scrollRankingBoard 组件的启发而开发，因为这个组件在早年的工作生涯中是重度使用的组件之一，在后来开发TechUI组件库的时候，感觉此组件功能上可以做一些拓展，所以就基于TechUI组件库中的TuiRolling组件进行了全新开发。