更新记录

1.0.0(2020-02-09)

数字增长和减少跑起来动画


平台兼容性

## numberAnimation 数字增长减少跑起来动画 ## 使用方式 在Vue中引用

import numberAnimation from'../../components/canlang-numberAnimation/canlang-numberAnimation.vue'

在template中使用

 <numberAnimation ref="number" :originNumber="oNumber" :stopNumber="aNumber" :time="times" :quantity="quantiys" :color="color" :size="size"></numberAnimation>

在script中使用

 export default {
    data() {
        return {
            oNumber:0,
            aNumber:0,
            times:1000,
            quantiys:2,
            color:"",
            size:30
        }
    },
    methods: {
       cheshi(){
              this.oNumber=0;
              this.aNumber=129.99;
              this.color="#EACD76";
              this.size=60;
              this.$nextTick(function(){
                  this.$refs.number.show();
              })
       },
    },
    components:{
        numberAnimation
    }
}
属性说明 属性名称 类型 默认值 说明
originNumber Number 0 起始数值
stopNumber Number 0 结束数值
time Number 1000 动画滚动时长(毫秒)
quantity Number 0 数字滚动动画包括的小数点位数,最多2位
color String #000000 数字颜色
size Number 60 数字大小(单位:rpx)
方法说明 通过ref获取组件调用方法 方法名 说明
show 开启数字滚动动画

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问