HarmonyOS Slider滑动问题

需要在滑动的时候修改滑块样式，所以按照如下实现，但是在点击滑轨的时候或者滑动结束之后，滑块无法定位到对应位置。

代码如下：

@Entry  
@Component  
struct SliderExample {  
  @State isDragging: boolean = false  
  build() {  
    Column({ space: 8 }) {  
      Text('block').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%')  
      Slider({ style: SliderStyle.OutSet, value: 40 })  
        .onChange((value: number, mode: SliderChangeMode) => {  
          if (mode == SliderChangeMode.Begin) {  
            this.isDragging = true  
          }else if(mode == SliderChangeMode.End){  
            this.isDragging = false  
          }  
        })  
        .margin({ left: this.isDragging ? -15 : -3, right: this.isDragging ? -14 : -2 })  
        .trackColor(Color.Black)  
        .layoutWeight(1)  
        .blockColor(this.isDragging ? "#f2ff2e43" : Color.White)  
        .blockSize({ width: this.isDragging ? 40 : 16, height: this.isDragging ? 40 : 16 })  
        .selectedColor("#f2ff2e43")  
        .trackThickness(2)  
        .blockBorderColor(this.isDragging ? "#80fe3b5d" : "")  
        .blockBorderWidth(this.isDragging ? 22 : 0)  
    }  
  }  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

HarmonyOS

zxjiu

2024-09-29 12:39:13

浏览

回答 1

按赞同

按时间

superinsect

请参考以下代码示例：

@Entry  
@Component  
export struct SliderTestPage {  
  @State isDragging: boolean = false  
  @State outSetValueOne: number = 40  
  build() {  
    Column({ space: 8 }) {  
      Text('block').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%')  
      Slider({  
        style: SliderStyle.OutSet,  
        value: this.outSetValueOne  
      })  
        .onChange((value: number, mode: SliderChangeMode) => {  
          if (mode == SliderChangeMode.Begin) {  
            this.isDragging = true  
          }else if(mode == SliderChangeMode.End){  
            this.isDragging = false  
          }  
          this.outSetValueOne = value  
        })  
        .margin({ left: this.isDragging ? -15 : -3, right: this.isDragging ? -14 : -2 })  
        .trackColor(Color.Black)  
        .layoutWeight(1)  
        .blockColor(this.isDragging ? "#f2ff2e43" : Color.White)  
        .blockSize({ width: this.isDragging ? 40 : 16, height: this.isDragging ? 40 : 16 })  
        .selectedColor("#f2ff2e43")  
        .trackThickness(2)  
        .blockBorderColor(this.isDragging ? "#80fe3b5d" : "")  
        .blockBorderWidth(this.isDragging ? 22 : 0)  
    }  
  }  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.

2024-09-29 15:59:34

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Slider滑动问题

订阅鸿蒙技术特刊，精选内容抢先看