update zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md.

Signed-off-by: N luoying_ace <luoying19@huawei.com>

update zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md.
Signed-off-by: N luoying_ace <luoying19@huawei.com>
0e85d371 · luoying_ace · Gitee · 9a01c582 · 0e85d371
隐藏空白更改
内联并排

Showing with 128 addition and 83 deletion

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md ...tion-dev/reference/arkui-ts/ts-basic-components-slider.md +128 -83

未找到文件。
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md
 # Slider
-滑动条组件，用来快速调节设置值，如音量、亮度等。
+滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。
 >  **说明：**
 >
@@ -23,10 +23,10 @@ Slider(options?: {value?: number, min?: number, max?: number, step?: number, sty
 | value | number | 否 | 当前进度值。<br/>默认值：0 |
 | min | number | 否 | 设置最小值。<br/>默认值：0 |
 | max | number | 否 | 设置最大值。<br/>默认值：100 |
-| step | number | 否 | 设置Slider滑动跳动值，当设置相应的step时，Slider为间歇滑动。<br/>默认值：1 |
+| step | number | 否 | 设置Slider滑动步长。<br/>默认值：1 |
-| style | SliderStyle | 否 | 设置Slider的滑块样式。<br/>默认值：SliderStyle.OutSet |
+| style | SliderStyle | 否 | 设置Slider的滑块与滑轨显示样式。<br/>默认值：SliderStyle.OutSet |
 | direction<sup>8+</sup> | [Axis](ts-appendix-enums.md#axis) | 否 | 设置滑动条滑动方向为水平或竖直方向。<br/>默认值：Axis.Horizontal |
-| reverse<sup>8+</sup> | boolean | 否 | 设置滑动条取值范围是否反向。<br/>默认值：false |
+| reverse<sup>8+</sup> | boolean | 否 | 设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。<br/>默认值：false |
 ## SliderStyle枚举说明
@@ -38,34 +38,34 @@ Slider(options?: {value?: number, min?: number, max?: number, step?: number, sty
 ## 属性
-不支持触摸热区设置。
+支持除触摸热区以外的通用属性设置。
 | 名称 | 参数类型 | 描述 |
 | -------- | -------- | -------- |
 | blockColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑块的颜色。 |
 | trackColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑轨的背景颜色。 |
-| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑轨的已滑动颜色。 |
+| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑轨的已滑动部分颜色。 |
 | showSteps | boolean | 设置当前是否显示步长刻度值。<br/>默认值：false |
-| showTips | boolean | 设置滑动时是否显示气泡提示百分比。<br/>默认值：false |
+| showTips | boolean | 设置滑动时是否显示百分比气泡提示。<br/>默认值：false |
 | trackThickness      | [Length](ts-types.md#length) | 设置滑轨的粗细。 |
 ## 事件
-通用事件仅支持：OnAppear，OnDisAppear。
+通用事件仅支持挂载卸载事件：OnAppear，OnDisAppear。
 | 名称 | 功能描述 |
 | -------- | -------- |
-| onChange(callback:&nbsp;(value:&nbsp;number,&nbsp;mode:&nbsp;SliderChangeMode)&nbsp;=&gt;&nbsp;void) | Slider滑动时触发事件回调。<br/>value：当前进度值。若返回值有小数，可使用Math.toFixed()将数据处理为想要的精度。<br/>mode：拖动状态。 |
+| onChange(callback:&nbsp;(value:&nbsp;number,&nbsp;mode:&nbsp;SliderChangeMode)&nbsp;=&gt;&nbsp;void) | Slider滑动时触发事件回调。<br/>value：当前滑动进度值。若返回值有小数，可使用Math.toFixed()方法将数据处理为预期的精度。<br/>mode：拖动状态。 |
 ## SliderChangeMode枚举说明
 | 名称 | 值 | 描述 |
 | -------- | -------- | -------- |
-| Begin | 0 | 用户开始拖动滑块。 |
+| Begin | 0 | 开始拖动滑块。 |
-| Moving | 1 | 用户拖动滑块中。 |
+| Moving | 1 | 正在拖动滑块过程中。 |
-| End | 2 | 用户结束拖动滑块。 |
+| End | 2 | 结束拖动滑块。 |
-| Click    | 3    | 用户点击滑动条使滑块位置移动。 |
+| Click    | 3    | 点击滑动条使滑块位置移动。 |
 ## 示例
@@ -75,105 +75,150 @@ Slider(options?: {value?: number, min?: number, max?: number, step?: number, sty
 @Entry
 @Component
 struct SliderExample {
-  @State outSetValue: number = 40
+  @State outSetValueOne: number = 40;
-  @State inSetValue: number = 40
+  @State inSetValueOne: number = 40;
-  @State outVerticalSetValue: number = 40
+  @State outSetValueTwo: number = 40;
-  @State inVerticalSetValue: number = 40
+  @State inSetValueTwo: number = 40;
+  @State vOutSetValueOne: number = 40;
+  @State vInSetValueOne: number = 40;
+  @State vOutSetValueTwo: number = 40;
+  @State vInSetValueTwo: number = 40;
  build() {
-    Column({ space: 5 }) {
+    Column({ space: 8 }) {
-      Text('slider out set').fontSize(9).fontColor(0xCCCCCC).width('90%')
+      Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
      Row() {
        Slider({
-          value: this.outSetValue,
+          value: this.outSetValueOne,
          min: 0,
          max: 100,
-          step: 1,
          style: SliderStyle.OutSet
        })
-        .blockColor(Color.Blue)
+          .showTips(true)
-        .trackColor(Color.Gray)
+          .onChange((value: number, mode: SliderChangeMode) => {
-        .selectedColor(Color.Blue)
+            this.outSetValueOne = value;
-        .showSteps(true)
+            console.info('value:' + value + 'mode:' + mode.toString());
-        .showTips(true)
+          })
-        .onChange((value: number, mode: SliderChangeMode) => {
+        // toFixed(0)将滑动条返回值处理为整数精度
-          this.outSetValue = value
+        Text(this.outSetValueOne.toFixed(0)).fontSize(12)
-          console.info('value:' + value + 'mode:' + mode.toString())
+      }
+      .width('80%')
+      Row() {
+        Slider({
+          value: this.outSetValueTwo,
+          step: 10,
+          style: SliderStyle.OutSet
        })
-        Text(this.outSetValue.toFixed(0)).fontSize(16)
+          .showSteps(true)
+          .onChange((value: number, mode: SliderChangeMode) => {
+            this.outSetValueTwo = value;
+            console.info('value:' + value + 'mode:' + mode.toString());
+          })
+        Text(this.outSetValueTwo.toFixed(0)).fontSize(12)
      }
-      .padding({ top: 50 })
      .width('80%')
-      Text('slider in set').fontSize(9).fontColor(0xCCCCCC).width('90%')
+      Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
      Row() {
        Slider({
-          value: this.inSetValue,
+          value: this.inSetValueOne,
          min: 0,
          max: 100,
-          step: 1,
          style: SliderStyle.InSet
        })
-        .blockColor(0xCCCCCC)
+          .blockColor('#191970')
-        .trackColor(Color.Black)
+          .trackColor('#ADD8E6')
-        .selectedColor(0xCCCCCC)
+          .selectedColor('#4169E1')
-        .showSteps(false)
+          .showTips(true)
-        .showTips(false)
+          .onChange((value: number, mode: SliderChangeMode) => {
-        .onChange((value: number, mode: SliderChangeMode) => {
+            this.inSetValueOne = value;
-          this.inSetValue = value
+            console.info('value:' + value + 'mode:' + mode.toString());
-          console.info('value:' + value + 'mode:' + mode.toString())
+          })
-        })
+        Text(this.inSetValueOne.toFixed(0)).fontSize(12)
-        Text(this.inSetValue.toFixed(0)).fontSize(16)
      }
      .width('80%')
      Row() {
-        Column() {
+        Slider({
-          Text('slider out direction set').fontSize(9).fontColor(0xCCCCCC).width('50%')
+          value: this.inSetValueTwo,
-          Slider({
+          step: 10,
-            value: this.outVerticalSetValue,
+          style: SliderStyle.InSet
-            min: 0,
+        })
-            max: 100,
+          .blockColor('#191970')
-            step: 1,
+          .trackColor('#ADD8E6')
-            style: SliderStyle.OutSet,
+          .selectedColor('#4169E1')
-            direction: Axis.Vertical
-          })
-          .blockColor(Color.Blue)
-          .trackColor(Color.Gray)
-          .selectedColor(Color.Blue)
          .showSteps(true)
-          .showTips(true)
          .onChange((value: number, mode: SliderChangeMode) => {
-            this.outVerticalSetValue = value
+            this.inSetValueTwo = value;
-            console.info('value:' + value + 'mode:' + mode.toString())
+            console.info('value:' + value + 'mode:' + mode.toString());
          })
-          Text(this.outVerticalSetValue.toFixed(0)).fontSize(16)
+        Text(this.inSetValueTwo.toFixed(0)).fontSize(12)
+      }
+      .width('80%')
+      Row() {
+        Column() {
+          Text('vertical outset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)
+          Row() {
+            Slider({
+              value: this.vOutSetValueOne,
+              style: SliderStyle.OutSet,
+              direction: Axis.Vertical
+            })
+              .blockColor('#191970')
+              .trackColor('#ADD8E6')
+              .selectedColor('#4169E1')
+              .showTips(true)
+              .onChange((value: number, mode: SliderChangeMode) => {
+                this.vOutSetValueOne = value;
+                console.info('value:' + value + 'mode:' + mode.toString());
+              })
+            Slider({
+              value: this.vOutSetValueTwo,
+              step: 10,
+              style: SliderStyle.OutSet,
+              direction: Axis.Vertical
+            })
+              .blockColor('#191970')
+              .trackColor('#ADD8E6')
+              .selectedColor('#4169E1')
+              .showSteps(true)
+              .onChange((value: number, mode: SliderChangeMode) => {
+                this.vOutSetValueTwo = value;
+                console.info('value:' + value + 'mode:' + mode.toString());
+              })
+          }
        }.width('50%').height(300)
        Column() {
-          Text('slider in direction set').fontSize(9).fontColor(0xCCCCCC).width('50%')
+          Text('vertical inset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)
-          Slider({
+          Row() {
-            value: this.inVerticalSetValue,
+            Slider({
-            min: 0,
+              value: this.vInSetValueOne,
-            max: 100,
+              style: SliderStyle.InSet,
-            step: 1,
+              direction: Axis.Vertical,
-            style: SliderStyle.InSet,
+              reverse: true // 竖向的Slider默认是上端是min值，下端是max值，因此想要从下往上滑动，需要设置reverse为true
-            direction: Axis.Vertical
+            })
-          })
+              .showTips(true)
-          .blockColor(0xCCCCCC)
+              .onChange((value: number, mode: SliderChangeMode) => {
-          .trackColor(Color.Black)
+                this.vInSetValueOne = value;
-          .selectedColor(0xCCCCCC)
+                console.info('value:' + value + 'mode:' + mode.toString());
-          .showSteps(false)
+              })
-          .showTips(false)
+            Slider({
-          .onChange((value: number, mode: SliderChangeMode) => {
+              value: this.vInSetValueTwo,
-            this.inVerticalSetValue = value
+              step: 10,
-            console.info('value:' + value + 'mode:' + mode.toString())
+              style: SliderStyle.InSet,
-          })
+              direction: Axis.Vertical,
-          Text(this.inVerticalSetValue.toFixed(0)).fontSize(16)
+              reverse: true
+            })
+              .showSteps(true)
+              .onChange((value: number, mode: SliderChangeMode) => {
+                this.vInSetValueTwo = value;
+                console.info('value:' + value + 'mode:' + mode.toString());
+              })
+          }
        }.width('50%').height(300)
      }
+    }.width('100%')
-    }.width('100%').margin({ top: 5 })
  }
 }
 ```