更新记录

1.0.0（2026-03-13）

新增

• 初始版本发布
• 基于 Levenshtein diff 算法实现高性能文本滚动动画
• 支持数字、字母、中文、货币符号等多种字符类型
• 支持 UP/DOWN/ANY 三种滚动方向
• 支持 20+ 预设缓动函数（linear、ease系列、quad、cubic、quart、quint、sine、expo、circ、back）
• 支持自定义字符列表配置
• 支持渐变边缘效果（fadingEdge）
• 支持固定字符宽度（charWidth）防止布局抖动
• 支持 change 和 animationEnd 事件
• Vue2/Vue3 双兼容
• 跨端兼容：H5、微信/支付宝/百度/字节/QQ/快手/京东小程序、App-vue/nvue

平台兼容性

uni-app(5.0)

uni-app x(5.0)

ry-ticker

基于 Levenshtein diff 算法的高性能文本滚动动画组件，支持数字、字母、中文、emoji 等任意字符。

特性

• 高性能：使用 Levenshtein diff 算法，仅动画变化的字符，相同字符保持静止
• 跨端兼容：支持 H5、微信小程序、App(vue/nvue)、支付宝/百度/字节等小程序
• Vue2/Vue3 双兼容：同时支持 Vue2 和 Vue3 项目
• 丰富配置：支持自定义动画时长、20+缓动函数、滚动方向等
• 多字符支持：数字、字母、中文、货币符号、emoji 等
• 智能路径：ANY 模式下自动选择最短滚动路径
• 渐变边缘：可选的顶部/底部渐变遮罩效果

安装

将 ry-ticker 文件夹复制到项目的 uni_modules 目录下即可，无需其他配置。

基础用法

<template>
  <ry-ticker :value="count" />
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    setInterval(() => {
      this.count = Math.floor(Math.random() * 10000)
    }, 2000)
  }
}
</script>

属性说明

事件

方法

缓动函数

支持以下缓动函数：

基础缓动

• linear - 线性
• ease, easeIn, easeOut, easeInOut - 标准缓动

多项式缓动

• easeInQuad, easeOutQuad, easeInOutQuad - 二次方
• easeInCubic, easeOutCubic, easeInOutCubic - 三次方
• easeInQuart, easeOutQuart, easeInOutQuart - 四次方
• easeInQuint, easeOutQuint, easeInOutQuint - 五次方

特殊缓动

• easeInSine, easeOutSine, easeInOutSine - 正弦
• easeInExpo, easeOutExpo, easeInOutExpo - 指数
• easeInCirc, easeOutCirc, easeInOutCirc - 圆形
• easeInBack, easeOutBack, easeInOutBack - 回弹效果

预设字符列表

import { PRESETS } from '@/uni_modules/ry-ticker/components/ry-ticker/props.js'

// 可用预设
PRESETS.NUMBER           // '0123456789'
PRESETS.ALPHABET_UPPER   // 大写字母
PRESETS.ALPHABET_LOWER   // 小写字母
PRESETS.ALPHABET         // 大小写字母
PRESETS.ALPHANUMERIC     // 字母数字
PRESETS.CURRENCY         // 货币相关字符
PRESETS.HEX              // 十六进制
PRESETS.TIME             // 时间格式 '0123456789:'
PRESETS.DATE             // 日期格式 '0123456789-/'
PRESETS.PERCENT          // 百分比 '0123456789.%'
PRESETS.TEMPERATURE      // 温度
PRESETS.CHINESE_NUMBER   // 中文数字

高级示例

金额显示

<template>
  <view class="amount">
    <text>¥</text>
    <ry-ticker
      :value="amount"
      :characterLists="['0123456789.,']"
      fontSize="48rpx"
      fontWeight="bold"
      color="#ff5500"
      :duration="600"
      easing="easeOutBack"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      amount: '1,234.56'
    }
  }
}
</script>

倒计时

<template>
  <ry-ticker
    :value="timeStr"
    :characterLists="['0123456789', ':']"
    fontSize="64rpx"
    fontWeight="bold"
    direction="DOWN"
    :duration="300"
    :charWidth="40"
  />
</template>

<script>
export default {
  data() {
    return {
      seconds: 3600
    }
  },
  computed: {
    timeStr() {
      var h = String(Math.floor(this.seconds / 3600)).padStart(2, '0')
      var m = String(Math.floor((this.seconds % 3600) / 60)).padStart(2, '0')
      var s = String(this.seconds % 60).padStart(2, '0')
      return h + ':' + m + ':' + s
    }
  },
  mounted() {
    var self = this
    setInterval(function() {
      if (self.seconds > 0) self.seconds--
    }, 1000)
  }
}
</script>

股票价格

<template>
  <view class="stock">
    <ry-ticker
      :value="price"
      :characterLists="['0123456789.']"
      fontSize="40rpx"
      :color="priceColor"
      :duration="400"
      easing="easeOutCubic"
    />
    <ry-ticker
      :value="change"
      :characterLists="['0123456789.%+-']"
      fontSize="28rpx"
      :color="priceColor"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      price: '156.78',
      change: '+2.35%',
      isUp: true
    }
  },
  computed: {
    priceColor() {
      return this.isUp ? '#00aa00' : '#ff0000'
    }
  }
}
</script>

渐变边缘效果

<template>
  <view style="background-color: #f0f0f0; padding: 20rpx;">
    <ry-ticker
      :value="number"
      fontSize="48rpx"
      :fadingEdge="true"
      backgroundColor="#f0f0f0"
    />
  </view>
</template>

固定字符宽度（防止抖动）

<template>
  <ry-ticker
    :value="number"
    fontSize="48rpx"
    :charWidth="32"
  />
</template>

characterLists 说明

characterLists 用于定义字符的滚动规则：

1. 同一列表内的字符 - 会产生滚动动画过渡
2. 不同列表间的字符 - 直接切换，无滚动
3. 不在列表中的字符 - 直接切换

<!-- 数字滚动，冒号直接切换 -->
<ry-ticker
  :value="'12:34:56'"
  :characterLists="['0123456789', ':']"
/>

<!-- 数字和小数点都滚动 -->
<ry-ticker
  :value="'123.45'"
  :characterLists="['0123456789.']"
/>

注意事项

1. 为防止数字宽度不一致导致的布局抖动，建议设置 charWidth 属性
2. characterLists 中同一列表内的字符会滚动过渡，不同列表间的字符会直接切换
3. 为获得最佳性能，建议只将需要滚动动画的字符加入 characterLists
4. 渐变边缘效果需要配合 backgroundColor 设置正确的背景色

兼容性

更新日志

1.0.0

• 初始版本发布
• 基于 Levenshtein diff 算法实现高性能文本滚动动画
• 支持数字、字母、中文、货币符号等多种字符类型
• 支持 UP/DOWN/ANY 三种滚动方向
• 支持 20+ 预设缓动函数
• 支持自定义字符列表配置
• 支持渐变边缘效果
• 支持固定字符宽度防止布局抖动
• Vue2/Vue3 双兼容
• 跨端兼容：H5、各类小程序、App