鸿蒙应用开发：Slider（滑动选择器）

一只小风华~

556人浏览 · 2025-06-27 14:54:59

一只小风华~ · 2025-06-27 14:54:59 发布

在HarmonyOS元服务开发中，Slider组件提供直观的滑块交互，常用于音量控制、亮度调节等场景。本文将详细介绍其属性、事件及完整使用示例。

一、组件属性

名称	类型	默认值	必填	说明
min	number	0	否	最小值
max	number	100	否	最大值
step	number	1	否	步长（>0，且需被`(max-min)`整除）
disabled	boolean	false	否	是否禁用
value	number	0	否	当前取值
activeColor	color	`#0A59F7`	否	已选区域颜色
backgroundColor	color	`rgba(0, 0, 0, 0.098)`	否	背景条颜色
block-size	number	16	否	滑块大小（12-28）
block-color	color	`#ffffff`	否	滑块颜色
show-value	boolean	false	否	是否显示当前值

二、事件说明

事件名称	参数	说明
bindchange	`{ value: number }`	拖动结束时触发
bindchanging	`{ value: number }`	拖动过程中实时触发

三、完整代码示例

1. HXML 页面结构

<view class="page-body">
  <view class="page-section page-section-gap">
    <view class="page-section-title">设置step：5</view>
    <view class="body-view">
      <slider value="60" bindchange="slider2change" step="5" show-value />
    </view>
  </view>
  <view class="page-section page-section-gap">
    <view class="page-section-title">显示当前value</view>
    <view class="body-view">
      <slider value="50" bindchange="slider3change" show-value />
    </view>
  </view>
  <view class="page-section page-section-gap">
    <view class="page-section-title">不显示当前value</view>
    <view class="body-view">
      <slider value="50" bindchange="slider4change" />
    </view>
  </view>
  <view class="page-section page-section-gap">
    <view class="page-section-title">设置最小50/最大值200</view>
    <view class="body-view">
      <slider
        value="100"
        bindchange="slider5change"
        min="50"
        max="200"
        show-value="{{showValue}}"/>
    </view>
  </view>
  <view class="page-section page-section-gap">
    <view class="page-section-title">设置颜色</view>
    <view class="body-view">
      <slider
        value="30"
        bindchange="slider6change"
        activeColor="#de01fc"
        backgroundColor="gray"
        min="0"
        max="100"
        show-value/>
    </view>
  </view>
  <view class="page-section page-section-gap">
    <view class="page-section-title">滑块设置</view>
    <view class="body-view">
      <slider
        value="0"
        bindchange="slider7change"
        block-color="orange"
        block-size="18"
        min="0"
        max="100"
        show-value/>
    </view>
  </view>
</view>
<view class="page-section page-section-gap">
  <view class="page-section-title">滑块大小</view>
  <view class="body-view">
    <slider block-size="{{20}}" />
  </view>
</view>
<view class="page-section page-section-gap">
  <view class="page-section-title">滑块颜色</view>
  <view class="body-view">
    <slider block-color="#FF0000" />
  </view>
</view>
<view class="page-section page-section-gap">
  <view class="page-section-title">动态设置</view>
  <view class="body-view">
    <slider
      value="{{currentValue}}"
      step="{{setStep}}"
      bindchange="sliderchange"
      bindchanging="bindchanging"
      activeColor="{{setActiveColor}}"
      backgroundColor="{{setBackgroundColor}}"
      min="0"
      max="100"
      show-value="{{isShowValue}}"
      block-size="{{setBlockSize}}"
      block-color="{{setBlockColor}}"/>
  </view>
</view>
<view style="margin-left: 30rpx; margin-top: 30rpx"
  >bindchange事件触发：{{currentValue}}</view>
<view style="margin-left: 30rpx; margin-top: 30rpx"
  >bindchanging事件触发：{{changingValue}}</view>
<view class="ascf-cell ascf-cell_switch">
  <view class="ascf-cell__bd">显示当前 value</view>
  <view class="ascf-cell__ft">
    <switch checked="{{isShowValue}}" bindchange="changeShowValue" />
  </view>
</view>
<view class="ascf-cell ascf-cell_switch">
  <view class="ascf-cell__bd">设置step=1或5</view>
  <view class="ascf-cell__ft">
    <switch checked="{{isSetStep}}" bindchange="changeStep" />
  </view>
</view>
<view class="ascf-cell ascf-cell_switch">
  <view class="ascf-cell__bd">设置已选择的颜色</view>
  <view class="-cell__ft">
    <switch checked="{{isSetActiveColor}}" bindchange="changeActiveColor" />
  </view>
</view>

2. JS 逻辑层

const pageData={
  data: {
    isShowValue: true,
    currentValue: 30,
    changingValue: '',
    setStep: 1,
    isSetStep: false,
    isSetActiveColor: false,
    isSetBackgroundColor: false,
    setActiveColor: '#1aad19',
    setBackgroundColor: '#e9e9e9',
    setBlockSize: '28',
    isSetBlockSize: false,
    setBlockColor: '#ffffff',
    isSetBlockColor: false,
    showValue: true,
  },
  sliderchange(e) {
    this.setData({
      currentValue: e.detail.value,
    });
  },
  bindchanging(e) {
    this.setData({
      changingValue: e.detail.value,
    });
  },
  changeShowValue() {
    this.setData({
      isShowValue: !this.data.isShowValue,
    });
  },
  changeStep() {
    this.setData({
      setStep: !this.data.isSetStep ? 5 : 1,
      isSetStep: !this.data.isSetStep,
    });
  },
  changeActiveColor() {
    this.setData({
      setActiveColor: !this.data.isSetActiveColor ? '#de01fc' : '#1aad19',
      isSetActiveColor: !this.data.isSetActiveColor,
    });
  },
  changeBackgroundColor() {
    this.setData({
      setBackgroundColor: !this.data.isSetBackgroundColor ? 'gray' : '#e9e9e9',
      isSetBackgroundColor: !this.data.isSetBackgroundColor,
    });
  },
  changeBlockSize() {
    this.setData({
      setBlockSize: !this.data.isSetBlockSize ? '10' : '28',
      isSetBlockSize: !this.data.isSetBlockSize,
    });
  },
  changeBlockColor() {
    this.setData({
      setBlockColor: !this.data.isSetBlockColor
        ? 'rgb(238, 3, 247)'
        : '#ffffff',
      isSetBlockColor: !this.data.isSetBlockColor,
    });
  },
}
for (var i = 1; i < 8; ++i) {
  (function (index) {
    pageData[`slider${index}change`] = function (e) {
      console.log(`slider${index}发生change事件，携带值为`, e.detail.value);
    };
  })(i);
}
Page(pageData)