更新记录

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

平台兼容性

uni-app(4.87)

lf-slide-rule 刻度尺组件

高性能可滑动刻度尺 uni-app 组件，适用于选择身高、体重、温度、速度等数值场景。

平台兼容性

功能特性

• 🎯 高性能 - Canvas 渲染 + 节流绘制，大范围数值也流畅
• 🌊 惯性滑动 - 物理模拟的惯性效果
• 💫 边界回弹 - 滑动到边界时弹性回弹
• 🧲 刻度吸附 - 停止滑动后自动对齐
• 🎨 自定义指示器 - 4 种内置样式 + 插槽自定义
• 📱 多平台 - Vue2/Vue3、App、H5、小程序

安装使用

将 components/lf-slide-rule 文件夹复制到你的项目 components 目录下即可。

基础用法

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

<script>
import lfSlideRule from "@/components/lf-slide-rule/lf-slide-rule.vue";
export default {
  components: { lfSlideRule },
  data() {
    return { height: 170 };
  },
};
</script>

Props 属性

基础属性

刻度属性

值显示属性

指示器属性

Slots 插槽

自定义指示器示例

<lf-slide-rule v-model:value="value">
  <template #indicator>
    <view class="my-indicator">
      <image src="/static/indicator.png" class="my-indicator-icon" />
      <view class="my-indicator-line"></view>
    </view>
  </template>
</lf-slide-rule>

Events 事件

Methods 方法

使用示例

圆形指示器（默认）

<lf-slide-rule
  v-model:value="height"
  :min="100"
  :max="220"
  unit="cm"
  indicatorStyle="circle"
  indicatorColor="#EC407A"
/>

三角形指示器

<lf-slide-rule
  v-model:value="weight"
  :min="30"
  :max="150"
  :step="0.5"
  :decimalPlaces="1"
  unit="kg"
  indicatorStyle="triangle"
  indicatorColor="#26A69A"
/>

菱形指示器 + 深色主题

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

线条指示器

<lf-slide-rule
  v-model:value="duration"
  :min="0"
  :max="120"
  :step="5"
  unit="min"
  indicatorStyle="line"
  :indicatorLineWidth="4"
  indicatorColor="#7C4DFF"
/>