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)  
    }  
  }  
}
HarmonyOS
2024-09-29 12:39:13
浏览
收藏 0
回答 1
待解决
回答 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)  
    }  
  }  
}
分享
微博
QQ
微信
回复
2024-09-29 15:59:34
相关问题
HarmonyOS 滑动问题
174浏览 • 1回复 待解决
HarmonyOS scroll滑动问题
603浏览 • 1回复 待解决
HarmonyOS 嵌套滑动问题
461浏览 • 1回复 待解决
HarmonyOS list滑动问题
980浏览 • 1回复 待解决
HarmonyOS onToch事件滑动问题
136浏览 • 1回复 待解决
HarmonyOS Scroll嵌套List的滑动问题
89浏览 • 1回复 待解决
TabContent内web组件滑动问题
340浏览 • 2回复 待解决
HarmonyOS Tabs和Web嵌套左右滑动问题
424浏览 • 1回复 待解决
HarmonyOS Refresh跟list组件惯性滑动问题
383浏览 • 1回复 待解决
仿射变换后列表滑动问题
518浏览 • 1回复 待解决
HarmonyOS 双向滑动Slider组件
223浏览 • 1回复 待解决
如何监听Slider滑动结束
656浏览 • 1回复 待解决
HarmonyOS Slider滑动自定义tips
274浏览 • 1回复 待解决
HarmonyOS Slider使用问题
282浏览 • 1回复 待解决
HarmonyOS scroll滚动问题
169浏览 • 1回复 待解决
HarmonyOS bindSheet拖动问题
137浏览 • 1回复 待解决
如何实现纵向且逆向滑动Slider
636浏览 • 1回复 待解决
HarmonyOS Slider UI展示问题
722浏览 • 1回复 待解决
HarmonyOS 悬浮按钮拖动问题
610浏览 • 1回复 待解决