更新记录

1.0.1（2026-07-17） 下载此版本

增加最小值对应的起始角度参数配置startAngle

1.0.0（2025-03-19） 下载此版本

初始化项目

平台兼容性

uni-app(3.8.0)

uni-app x(3.8.0)

环状滑块选择器

组件名：wyzh-ring-slider

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面 template中即可直接使用，无需在页面中import和注册components。

基本用法

在 template 中使用组件，组件尺寸继承父元素宽度

<!-- 基本使用 -->
<wyzh-ring-slider
        :max="200"
        :min="0"
        :name="'Energy'"
        :unit="'J/cm²'"
        :value="value"
        @change="changeEnergy"
/>
<!-- 自定义滑块和轨道尺寸 -->
<wyzh-ring-slider
        :max="200"
        :min="0"
        :name="'Energy'"
        :point-size="20"
        :track-width="22"
        :unit="'J/cm²'"
        :value="value"
        @change="changeEnergy"
/>
<!-- 设置轨道颜色 -->
<wyzh-ring-slider
        :max="200"
        :min="0"
        :name="'Energy'"
        :unit="'J/cm²'"
        :value="value"
        track-color="blue"
        @change="changeEnergy"
/>
<!-- 自定义滑块样式 -->
<wyzh-ring-slider
        :max="200"
        :min="0"
        :name="'Energy'"
        :point-style="{backgroundColor: 'transparent', border: '6px solid #FFFFFF'}"
        :unit="'J/cm²'"
        :value="value"
        @change="changeEnergy"
/>
<!-- 设置文字颜色 -->
<wyzh-ring-slider
        :max="200"
        :min="0"
        :name="'Energy'"
        :unit="'J/cm²'"
        :value="value"
        font-color="#f5fff0"
        @change="changeEnergy"
/>
<!-- 设置保留角度 -->
<wyzh-ring-slider
        :max="200"
        :min="0"
        :name="'Energy'"
        :reserved-angle="10"
        :unit="'J/cm²'"
        :value="value"
        @change="changeEnergy"
/>
<!-- 自定义起始角度（最小值位置） -->
<wyzh-ring-slider
        :max="200"
        :min="0"
        :name="'Energy'"
        :start-angle="90"
        :unit="'J/cm²'"
        :value="value"
        @change="changeEnergy"
/>

API

Props

Events