HarmonyOS 鸿蒙Next中Slider如何判断是否是用户拖拽改变了进度条

HarmonyOS 鸿蒙Next中Slider如何判断是否是用户拖拽改变了进度条

Slider({
  style: SliderStyle.OutSet,
  value: this.progress,
  max: this.maxSeekBarProgress,
  min: 0,
})
  .blockStyle({ type: SliderBlockType.DEFAULT })
  .selectedColor($r('app.color.colorFF443D'))
  .trackColor($r('app.color.white'))
  .blockColor($r('app.color.colorFF443D'))
  .trackThickness(3)
  .height(18)
  .blockSize({ width: 9, height: 9 })
  .width(CommonConstants.match_parent)
  .onChange((value: number) => {
    console.log('解析-----', value);
    this.isListeningVideoProgress = true;
    if (value > this.lastProgress) { //代表向右滚动

    } else {
    }
    this.lastProgress = value;
  })
onChange 没有类似android进度监听FromUser 字段。

更多关于HarmonyOS 鸿蒙Next中Slider如何判断是否是用户拖拽改变了进度条的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

Slider组件的onChange回调提供了SliderChangeMode参数，可通过mode参数识别用户操作阶段：

.<function>(value: number, mode: SliderChangeMode) => {
  if (mode === SliderChangeMode.Begin) {
    console.log('用户开始拖动');
    this.isUserDragging = true;
  } else if (mode === SliderChangeMode.End) {
    console.log('用户结束拖动');
    this.isUserDragging = false;
    // 在此处理用户主动操作结束后的逻辑
  }
}

更多关于HarmonyOS 鸿蒙Next中Slider如何判断是否是用户拖拽改变了进度条的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


利用 onChange 事件的 mode 进行判断

demo 如下

Slider({
  value: this.playerModel.progressVal,
  step: PlayConstants.PROGRESS_STEP,
  style: SliderStyle.OutSet
})
  .onChange((value: number, mode: SliderChangeMode) => {
    if (mode === SliderChangeMode.Begin ||
      mode === SliderChangeMode.Moving ||
      mode === SliderChangeMode.End) {
      console.log('用户拖拽触发的进度变化:', value);
    } else if (mode === SliderChangeMode.Click) {
      console.log('用户点击触发的进度变化:', value);
    }
  })

只要走了onchange回调, 就是手动触发的, 赋值的slider是不走回调的

在HarmonyOS Next中，可以通过Slider的onChange事件判断用户拖拽。当用户拖拽滑块时会触发onChange回调，而程序设置值不会触发。示例代码：

Slider({
  onChange: (value: number, mode: SliderChangeMode) => {
    if (mode === SliderChangeMode.End) {
      // 用户拖拽结束
    } else if (mode === SliderChangeMode.Moving) {
      // 用户正在拖拽
    }
  }
)

SliderChangeMode枚举包含End(用户操作结束)、Moving(用户拖拽中)和Click(点击进度条)三种状态。

在HarmonyOS Next中，可以通过监听Slider的onChangeStart和onChangeEnd事件来判断是否是用户拖拽操作。具体实现方式如下：

  1. 添加一个标志位来记录是否是用户操作：
private isUserDragging: boolean = false;
  1. 修改Slider代码，添加事件监听：
Slider({
  // ...原有参数
})
.onChangeStart(() => {
  this.isUserDragging = true;
})
.onChange((value: number) => {
  if(this.isUserDragging) {
    console.log('用户拖拽改变进度', value);
    // 处理用户拖拽逻辑
  } else {
    console.log('程序改变进度', value);
    // 处理程序改变逻辑
  }
})
.onChangeEnd(() => {
  this.isUserDragging = false;
});

这样就能区分是用户拖拽还是程序自动改变进度了。当用户开始拖拽滑块时会触发onChangeStart，结束拖拽时触发onChangeEnd，在这两个事件之间发生的onChange就是用户拖拽导致的。

回到顶部