低代码高性能原生UI框架CountTo 数字滚动
组件类型：UxCounttoComponentPublicInstance
支持设置滚动时间，可显示小数
平台兼容性
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| √ | √ | √ | x | x |
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| theme | String | primary | 主题颜色 |
| startVal | Number | 0 | 开始的数值 |
| endVal | Number | 0 | 要滚动的目标数值 |
| duration | Number | 2000 | 滚动到目标数值的动画持续时间，单位为毫秒 (ms） |
| millisecond | Boolean | false | 是否展示毫秒倒计时 |
| autoplay | Boolean | true | 设置数值后是否自动开始滚动 |
| decimals | Number | 0 | 要显示的小数位数 |
| color | String | $ux.Conf.fontColor | 字体颜色 |
| darkColor | String | - | 深色 |
| size | Number | $ux.Conf.fontSize | 字体大小 |
| bold | Boolean | false | 字体是否加粗 |
theme
| 值 | 说明 |
|---|---|
| primary | 主色 |
| warning | 警告 |
| success | 成功 |
| error | 错误 |
| info | 文本 |
darkColor
| 值 | 说明 |
|---|---|
| none | 不显示 |
| auto | 自动适配深色模式 |
| color | 其他颜色 |
Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| end | 数值滚动到目标值时触发 | event: Function |
示例代码
html
<template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag" title="数字滚动" :bold="true">
<ux-text text="支持设置滚动时间，可显示小数"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="数字滚动" text="https://www.uxframe.cn/component/display/countto.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="主题" :bold="true">
<ux-text text="多种主题可配置，适配暗黑模式" :mb="15"></ux-text>
<ux-row>
<ux-countto theme="success" :startVal="0" :endVal="5000" :duration="2000"></ux-countto>
<ux-countto theme="warning" :startVal="0" :endVal="5000" :duration="2000" :ml="10"></ux-countto>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="小数" :bold="true">
<ux-text text="支持小数显示，可精确小数位数" :mb="15"></ux-text>
<ux-row>
<ux-countto theme="success" :decimals="2"></ux-countto>
<ux-countto theme="warning" :decimals="4" :ml="10"></ux-countto>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="自由控制" :bold="true">
<ux-text text="支持控制动画播放" :mb="15"></ux-text>
<ux-col>
<ux-countto ref="uxCounttoRef" :autoplay="false"></ux-countto>
<ux-button theme="primary" :mt="10" text="开始" @click="start"></ux-button>
<ux-button theme="success" :mt="10" text="暂停" @click="pause"></ux-button>
<ux-button theme="warning" :mt="10" text="继续" @click="resume"></ux-button>
<ux-button theme="error" :mt="10" text="停止" @click="stop"></ux-button>
</ux-col>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template><template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag" title="数字滚动" :bold="true">
<ux-text text="支持设置滚动时间，可显示小数"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="数字滚动" text="https://www.uxframe.cn/component/display/countto.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="主题" :bold="true">
<ux-text text="多种主题可配置，适配暗黑模式" :mb="15"></ux-text>
<ux-row>
<ux-countto theme="success" :startVal="0" :endVal="5000" :duration="2000"></ux-countto>
<ux-countto theme="warning" :startVal="0" :endVal="5000" :duration="2000" :ml="10"></ux-countto>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="小数" :bold="true">
<ux-text text="支持小数显示，可精确小数位数" :mb="15"></ux-text>
<ux-row>
<ux-countto theme="success" :decimals="2"></ux-countto>
<ux-countto theme="warning" :decimals="4" :ml="10"></ux-countto>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="自由控制" :bold="true">
<ux-text text="支持控制动画播放" :mb="15"></ux-text>
<ux-col>
<ux-countto ref="uxCounttoRef" :autoplay="false"></ux-countto>
<ux-button theme="primary" :mt="10" text="开始" @click="start"></ux-button>
<ux-button theme="success" :mt="10" text="暂停" @click="pause"></ux-button>
<ux-button theme="warning" :mt="10" text="继续" @click="resume"></ux-button>
<ux-button theme="error" :mt="10" text="停止" @click="stop"></ux-button>
</ux-col>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template>ts
<script setup>
let title = ''
const uxCounttoRef = ref<UxCounttoComponentPublicInstance | null>(null)
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
function start() {
uxCounttoRef.value!.start()
}
function pause() {
uxCounttoRef.value!.pause()
}
function resume() {
uxCounttoRef.value!.resume()
}
function stop() {
uxCounttoRef.value!.stop()
}
</script><script setup>
let title = ''
const uxCounttoRef = ref<UxCounttoComponentPublicInstance | null>(null)
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
function start() {
uxCounttoRef.value!.start()
}
function pause() {
uxCounttoRef.value!.pause()
}
function resume() {
uxCounttoRef.value!.resume()
}
function stop() {
uxCounttoRef.value!.stop()
}
</script>css
<style lang="scss">
</style><style lang="scss">
</style>