mosowe-number-run 数字动画效果

uniapp/uni_modules组件

下载地址

兼容性

平台	android	ios	微信小程序	H5
兼容	√	√	√	√

props

属性	类型	说明	默认
number	number	数值	0
size	number	尺寸，单位px	30
delay	number	动画延迟执行时间，单位ms	100
speed	number	动画执行时长，单位ms	500
auto	boolean	是否自动播放	true

emits

事件名	说明
click	组件点击事件

events

事件名	说明
start	手动触发动画事件

示例代码

<template>
  <view class="h3-title">手动触发</view>
  <mosowe-number-run
    ref="zoNumberRunRef"
    :number="number"
    :delay="100"
    :leep="1000"
    :auto="false"
  ></mosowe-number-run>
  <mosowe-button @click="addNumber">点我增加</mosowe-button>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  const zoNumberRunRef = ref<any>(null);
  const number = ref(12356);
  setTimeout(() => {
    zoNumberRunRef.value.start();
  }, 1000);
  const addNumber = () => {
    number.value += 1;
  };
</script>

<style lang="scss" scoped>
  .number-run-page {
  }
</style>

贡献者

mosowe