ScrollNum 数字滚动

数字滚动/动态增加组件

使用指南

在 Taro 文件中引入组件

import { ZoScrollNum } from '@lylb/tzo-ui';

组件依赖的样式文件（仅按需引用时需要）

@import '~@lylb/tzo-ui/dist/style/components/scroll-num.scss';

一般用法

import Taro from '@tarojs/taro';
import { ZoScrollNum } from '@lylb/tzo-ui';
export default class Index extends Taro.Component {
  constructor() {
    super(...arguments);
    this.state = {
      endVal: 4567.82,
    };
  }
  finished = () => {
    console.log('数字滚动结束');
  };
  render() {
    const { endVal } = this.state;
    return (
      <View>
        // 动态增加与减少模式
        <ZoScrollNum
          endVal={endVal}
          mode="increase"
          fontSize={50}
          color="#000"
          decimals={2}
          speed={2}
          timing="ease"
          onFinished={this.finished}
        />
        // 动态滚动模式
        <ZoScrollNum
          endVal={endVal}
          mode="scroll"
          fontSize={50}
          color="blue"
          decimals={1}
          speed={2}
        />
        // 数字滚动(自定义图片)
        <ZoScrollNum
          endVal={endVal}
          mode="scroll"
          spriteUrl={spriteUrl}
          fontSize={50}
          color="#000"
          decimals={2}
          itemHeight={50}
          spriteWidth={33}
        />
      </View>
    );
  }
}

参数

参数	说明	类型	可选值	默认值
endVal	结束值	number	必填	-
decimals	保留小数的位数（默认 0）	number	-	0
speed	滚动速度（默认 1）	number	大于 0	1
timing	’increase‘模式下的速度模式	string	'linear'/'scroll'	linear
mode	’increase‘：动态增加与减少模式 ’scroll‘:滚动模式	stirng	’scroll‘/'increase'	increase
spriteUrl	滚动模式下：雪碧图地址	string	-	Calibri
itemHeight	滚动模式下：单个字体高度（雪碧图单个高度）默认值未字体大小	number	-	字体大小
spriteWidth	滚动模式下：雪碧图宽度默认 50px	number	-	50
color	字体颜色	string	-	#000

事件

事件名称	说明	返回参数
onFinished	’increase‘模式下动画结束回调函数	-

TZo UI

ScrollNum 数字滚动

使用指南

一般用法

参数

事件