# bz-count-to 数字滚动
# 基本用法
该组件一般用于需要滚动数字到某一个值的场景，目标要求是一个递增的值。1.0.1 版本开始支持此组件。
扫码预览
用BoosHi扫码或PC端点击
<template>
<view class="demo-ui-page">
<view class="demo-content">
<view class="demo-title">bz-count-to 数字滚动</view>
<demo-cell>
<bz-count-to :startVal="30" :endVal="500"></bz-count-to>
</demo-cell>
<demo-cell title="滚动相关参数">
<bz-count-to :startVal="30" :endVal="500" :duration="2000" :useEasing="false"></bz-count-to>
</demo-cell>
<demo-cell title="显示小数位">
<bz-count-to :startVal="30" :endVal="500.55" :decimals="2"></bz-count-to>
</demo-cell>
<demo-cell title="调试">
<bz-count-to ref="bzCountToRef" v-bind="params"></bz-count-to>
<br />
<br />
<bz-button class="mr-10" size="small" @click="start">开始</bz-button>
<bz-button class="mr-10" size="small" @click="stop">暂停</bz-button>
<bz-button class="mr-10" size="small" @click="resume">继续</bz-button>
<bz-button class="mr-10" size="small" @click="reStart">暂停/继续</bz-button>
</demo-cell>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
params: {
startVal: 1,
endVal: 2000,
duration: 800,
autoplay: false,
decimals: 2,
useEasing: true,
decimal: '.',
fontColor: '#606266',
fontSize: '20px',
bold: true,
separator: ',',
}
}
},
methods: {
start() {
this.$refs.bzCountToRef.start();
},
stop() {
this.$refs.bzCountToRef.stop();
},
resume() {
this.$refs.bzCountToRef.resume();
},
reStart() {
this.$refs.bzCountToRef.reStart();
},
changeMyParams (data) {
this.params = data;
},
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
展开 刷新 关闭
# 属性说明
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
|---|---|---|---|---|
| startVal | String, Number | 0 | - | 开始的数值，默认从 0 增长到某一个数 |
| endVal | String, Number | 0 | - | 要滚动的目标数值，必须 |
| duration | String, Number | 2000 | - | 滚动到目标数值的动画持续时间，单位为毫秒（ms) |
| autoplay | Boolean | true | - | 设置数值后是否自动开始滚动 |
| decimals | String, Number | 0 | - | 要显示的小数位数 |
| useEasing | Boolean | true | - | 是否在即将到达目标数值的时候，使用缓慢滚动的效果 |
| decimal | String | . | - | 十进制小数整数分割符 |
| fontColor | String | - | - | 字体颜色 |
| fontSize | String | - | - | 字体大小 |
| bold | Boolean | false | - | 是否加粗字体 |
| separator | String | - | 千位分隔符，类似金额的分割(￥ 23,321.05 中的",") |