uni-app slider组件拖动事件完成change事件被页面点击事件阻止

uni-app slider组件拖动事件完成change事件被页面点击事件阻止

示例代码：

// 拖动进度条
sliderChange(data) {
    // console.log('拖动完成', data.detail.value)
    this.setIsDrag(false)
    this.isMove = false;
    this.sliderVal = data.detail.value
    if(data.detail.value >= 100){  //拖动到最后3秒
        this.sliderVal = ((this.duration - 3) / (this.duration / 100)).toFixed(2);
    }
    let a = this.duration / 100;
    this.sliderVal = this.sliderVal;
    this.videoContext.seek(Math.floor((this.sliderVal * a)));
    if(!this.firstPlay) return
}

操作步骤：

  • 在slider触发change事件时，点击页面，change事件不触发

预期结果：

  • change事件正常运行

实际结果：

  • 阻止了change事件的运行

bug描述：

  • slider组件，拖动事件完成：change事件，被页面点击事件阻止

更多关于uni-app slider组件拖动事件完成change事件被页面点击事件阻止的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

不仅仅是H5，小程序、APP都会有这个问题

更多关于uni-app slider组件拖动事件完成change事件被页面点击事件阻止的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的事件冒泡和事件处理优先级问题。在uni-app中，当slider的change事件与页面点击事件同时触发时，由于事件冒泡机制，页面点击事件可能会阻止slider的change事件的正常执行。

解决方案：

  1. 使用事件修饰符：在页面点击事件上添加.stop修饰符阻止事件冒泡
<view @tap.stop="handlePageClick">
  1. 延迟处理：在slider的change事件中使用setTimeout延迟执行
sliderChange(data) {
    setTimeout(() => {
        this.setIsDrag(false)
        this.isMove = false;
        this.sliderVal = data.detail.value
        if(data.detail.value >= 100){
            this.sliderVal = ((this.duration - 3) / (this.duration / 100)).toFixed(2);
        }
        let a = this.duration / 100;
        this.videoContext.seek(Math.floor((this.sliderVal * a)));
        if(!this.firstPlay) return
    }, 50)
}
  1. 使用@changing事件：如果需要实时响应拖动过程，可以同时使用@changing事件
<slider [@change](/user/change)="sliderChange" [@changing](/user/changing)="sliderChanging" />
回到顶部