更新记录

1.0.1（2026-05-12） 下载此版本

本次优化

• 优化五段刻度点的定位逻辑，修复首尾刻度贴边和偏移问题
• 优化滑动交互，避免滑块经过刻度点区域时出现拖动卡住
• 优化组件展示层结构，刻度点改为纯展示，不阻断原生滑动事件
• 优化视觉样式，支持更清晰的轨道配色和分段展示效果
• 新增返回值精度控制，支持业务按需获取整数或小数结果
• 新增组件实例方法，支持外部主动初始化段位和一键重置归零
• 优化首页示例页布局，提升组件展示效果，更适合业务接入参考

新增能力

• 新增 activeColor 字段，用于控制激活轨道颜色
• 新增 inactiveColor 字段，用于控制未激活轨道颜色
• 新增 valuePrecision 字段，用于控制换算结果返回精度
• 新增 initSlider(index) 方法，用于初始化到指定段位
• 新增 resetSlider() 方法，用于快速归零

兼容说明

• 组件适用于 uni-app 项目
• 当前主要面向 Vue2 / Vue3、H5、App-vue 和主流小程序场景

升级建议

• 如果旧版本自行覆盖了刻度层样式，升级后建议重新检查首尾定位效果
• 如果业务需要外部主动归零，建议通过 ref 调用 resetSlider()

1.0.0（2026-05-12） 下载此版本

五段滑动组件

平台兼容性

uni-app(3.7.12)

five-segment-slider

five-segment-slider 是一个适用于 uni-app 的五段式滑动组件，支持自由拖动、分段刻度显示、颜色自定义，以及根据总数值返回百分比和换算结果。

功能特点

• 五段刻度展示，适合比例选择类业务
• 支持自由拖动，百分比返回固定为整数
• 支持激活轨道色和未激活轨道色配置
• 支持按总数值自动换算结果
• 支持返回值小数位控制
• 适用于 H5、App-vue 和主流小程序平台

目录结构

uni_modules/
└─ five-segment-slider/
   ├─ components/
   │  └─ five-segment-slider/
   │     └─ five-segment-slider.vue
   ├─ package.json
   └─ README.md

组件属性

事件

change

滑动变化时触发，返回对象结构如下：

{
  index: 2,
  percent: 50,
  value: 500
}

• index：当前百分比所在分段索引
• percent：当前百分比，固定返回整数
• value：根据 totalAmount 换算后的值

使用示例

<template>
    <view>
        <five-segment-slider
            title="选择计算比例"
            :total-amount="1000"
            :initial-index="2"
            active-color="#f97316"
            inactive-color="#fed7aa"
            :value-precision="2"
            @change="handleSliderChange"
        />
    </view>
</template>

<script>
    import FiveSegmentSlider from '@/uni_modules/five-segment-slider/components/five-segment-slider/five-segment-slider.vue'

    export default {
        components: {
            FiveSegmentSlider
        },
        methods: {
            handleSliderChange(payload) {
                console.log(payload)
            }
        }
    }
</script>

返回值说明

当 totalAmount 为 1000 时：

• 滑到 25%，返回 250
• 滑到 50%，返回 500
• 滑到 75%，返回 750

当设置 valuePrecision="2" 时，返回值会按两位小数输出。

注意事项

• 当前组件百分比固定返回整数，不返回小数百分比
• 组件内部段点为展示层，不会阻断滑块拖动
• 如果用于 H5 输入场景，避免给 input 或 textarea 设置 box-sizing: border-box

发布前建议

• 将 package.json 中的 author、homepage、repository、bugs 等字段替换为真实信息
• 根据你的插件市场页面补充截图、封面、更新日志
• 如果后续增加平台差异能力，建议补充 CHANGELOG.md