更新记录

2.0.0（2026-09-23） 下载此版本

2.0.0（2026-09-23）

修复

• 小程序端 computed 返回对象样式不生效，改为字符串样式
• 多实例同一毫秒挂载导致 canvas id 重复而空白，改为自增唯一 id，并支持 canvasId 手动指定
• 微信小程序 canvas 层级最高、遮挡弹窗、滑动卡顿，改用 Canvas 2D 同层渲染
• App 端 canvas 触摸事件缺少 clientX 导致值为 NaN
• App 端 .prevent 修饰符在 canvas 事件上报错
• App 端旧版 canvas 不支持 top 基线导致刻度文字与刻度重叠
• 纵向拖动被页面滚动抢占、touchcancel 被误判为点击
• 小数 step 浮点误差
• 停顿后松手仍产生惯性
• 容器不可见时初始化无限重试

新增

• direction 纵向模式，reverse 反转方向，scalePosition 刻度生长位置
• Vue2 / Vue3 v-model 全兼容，realtime 滑动中实时同步
• clickable 点击跳转，vibrate 震动反馈
• mediumStep 中刻度，labelStep 文字间隔
• activeScaleColor / activeTextColor 已选区间高亮
• formatter / valueFormatter 格式化函数
• inertia / bounce / friction / snapDuration / maxVelocity 物理参数
• showIndicator / showLabel / showMask / maskWidth / labelOffset / fontFamily / minorLineWidth / majorLineWidth
• value 作用域插槽，scrollStart / ready 事件，getValue() 方法
• H5 鼠标拖拽，窗口 resize 自动刷新
• decimalPlaces 默认按 step 自动推断

性能

• App / H5 改用 renderjs：触摸、惯性、绘制全部在渲染层执行，无跨层通信
• 核心算法抽离为 lf-slide-rule-core.js，各端共用
• 缓冲画布 + CSS 位移，滑动过程不重绘；已选高亮独立画布 + CSS 裁切，同样零重绘
• 惯性按真实时间衰减，速度加权平滑，高刷新率屏幕手感一致
• 震动仅在手指拖动阶段触发并限频

破坏性变更

• 目录迁移至 uni_modules/lf-slide-rule，easycom 自动引入
• App-nvue 不再声明支持
• 详见 UPGRADE.md

1.0.0

• 首次发布

1.0.0（2025-12-23） 下载此版本

平台兼容性

uni-app(5.26)

lf-slide-rule 滑动刻度尺

高性能可滑动刻度尺组件，适用于身高、体重、温度、时长、金额等数值选择场景。

特性

• 高性能：App / H5 在渲染层（renderjs）完成触摸、物理与绘制；缓冲画布一次绘制 3 倍视口，滑动只做 CSS 位移
• 微信小程序同层渲染：Canvas 2D，无层级遮挡与卡顿问题
• 横向 / 纵向：一个属性切换方向，刻度生长位置可选
• 完整手感：惯性、回弹、吸附、点击跳转、震动反馈，均可独立开关
• 多级刻度：小 / 中 / 大刻度，已选区间可高亮
• 高度可定制：刻度与当前值格式化函数、指示器插槽、当前值作用域插槽
• Vue2 / Vue3 v-model 全兼容，H5 支持鼠标拖拽

兼容性

微信小程序要求基础库 ≥ 2.9.0。

安装

插件市场（推荐）：在插件页点击「使用 HBuilderX 导入插件」，导入后直接使用，无需注册。

手动：将 uni_modules/lf-slide-rule 复制到项目根目录 uni_modules 下。

快速开始

<template>
  <lf-slide-rule v-model="height" :min="100" :max="220" unit="cm" />
</template>

<script>
export default {
  data() {
    return { height: 170 };
  },
};
</script>

Vue2 与 Vue3 均使用 v-model。Vue3 中 v-model:value 也可用。

Props

值与范围

布局

刻度

当前值

指示器

交互

Events

Slots

Methods

通过 ref 调用。

示例

小数步进 + 已选高亮 + 自定义当前值

<lf-slide-rule
  v-model="weight"
  :min="30" :max="150" :step="0.5" :mediumStep="2"
  activeScaleColor="#26A69A" activeTextColor="#26A69A"
  indicatorColor="#26A69A" indicatorStyle="triangle"
>
  <template #value="{ value, display }">
    <text class="big">{{ display }}</text>
    <text class="small">kg / {{ (value * 2).toFixed(1) }} 斤</text>
  </template>
</lf-slide-rule>

纵向

<lf-slide-rule
  v-model="volume"
  direction="vertical" scalePosition="left"
  :height="260" :min="0" :max="100" :mediumStep="5"
  :showValue="false"
  activeScaleColor="#2196F3" indicatorColor="#2196F3"
/>

大范围 + 格式化 + 震动

<lf-slide-rule
  v-model="money"
  :min="0" :max="100000" :step="100" :majorStep="10" :mediumStep="5"
  :scaleWidth="6" :friction="0.96" vibrate
  :formatter="v => (v >= 10000 ? v / 10000 + 'w' : v / 1000 + 'k')"
  :valueFormatter="v => '¥ ' + v"
/>

深色主题

<lf-slide-rule
  v-model="temperature"
  :min="-20" :max="50" unit="°C" scalePosition="top"
  indicatorStyle="diamond" indicatorColor="#FF9800"
  scaleColor="#555" majorScaleColor="#FF9800"
  textColor="#AAA" valueColor="#FF9800" backgroundColor="#1E1E1E"
/>

自定义指示器

<lf-slide-rule v-model="value">
  <template #indicator>
    <image src="/static/arrow.png" style="width: 24px; height: 24px" />
  </template>
</lf-slide-rule>

常见问题

组件在 tab / 弹层 / v-show 中不显示或尺寸错误 初始化时容器不可见会导致宽度为 0。组件会自动重试，若仍异常请在显示后调用 refresh()。

非微信小程序平台指示器被 canvas 遮挡 这些平台仍是原生 canvas，层级最高。可关闭 showIndicator 或改用同层渲染的平台。

同页多个刻度尺是否需要不同 canvasId 不需要，组件会为每个实例自动生成唯一 id。

小数出现 0.30000000004 已按 step 自动推断小数位并做精度修正，无需处理。

开启 vibrate 后 Android 上略有顿挫 震动是系统调用，有固定开销。组件已限频并只在手指拖动时触发，追求极致流畅可关闭。

更多

• 更新日志：changelog.md
• 从 1.x 升级：UPGRADE.md