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 嵌套滑动问题
212浏览 • 1回复 待解决
HarmonyOS scroll滑动问题
350浏览 • 1回复 待解决
HarmonyOS list滑动问题
660浏览 • 1回复 待解决
TabContent内web组件滑动问题
148浏览 • 2回复 待解决
HarmonyOS Tabs和Web嵌套左右滑动问题
237浏览 • 1回复 待解决
仿射变换后列表滑动问题
217浏览 • 1回复 待解决
如何监听Slider滑动结束
349浏览 • 1回复 待解决
HarmonyOS Slider UI展示问题
317浏览 • 1回复 待解决
HarmonyOS 悬浮按钮拖动问题
245浏览 • 1回复 待解决
HarmonyOS LongPressGesture手势移动问题
335浏览 • 1回复 待解决
如何实现纵向且逆向滑动Slider
357浏览 • 1回复 待解决
HarmonyOS Scroll组件滚动问题
384浏览 • 1回复 待解决
HarmonyOS 滑动冲突问题
281浏览 • 1回复 待解决
HarmonyOS Slider showTips
140浏览 • 1回复 待解决
JS的Slider旋转问题有知道的吗?
3152浏览 • 1回复 待解决
HarmonyOS Tabs组件的Tab栏滚动问题
395浏览 • 1回复 待解决
es6启动问题有了解的吗?
2340浏览 • 1回复 待解决
win10下MySQL的后台启动问题
2853浏览 • 1回复 待解决
HarmonyOS list 嵌套web滑动切换问题
378浏览 • 1回复 待解决
Grid嵌套滚动问题有知道的吗?
2538浏览 • 1回复 待解决
HarmonyOS 自定义Slider样式
234浏览 • 1回复 待解决