uni-app slider组件的change事件会执行两次

项目信息	详细信息
产品分类	uniapp/App
PC开发环境操作系统	Windows
PC开发环境操作系统版本号	win11
HBuilderX类型	正式
HBuilderX版本号	3.98
手机系统	Android
手机系统版本号	Android 14
手机厂商	小米
手机机型	小米
页面类型	vue
vue版本	vue3
打包方式	云端
项目创建方式	HBuilderX

示例代码：

<slider  
  :value="sliderValue"  
  step="0.1"  
  min="0"  
  max="1"  
  block-size="12"  
  block-color="#fb7299"  
  show-value  
  @change="changeSlider"  
/>  

const sliderValue = ref(1)  
function changeSlider(e){  
  console.log('==== e :', e);  
}

操作步骤：

每次滑动的时候，会在释放滑块的瞬间执行两次changeSlider事件，如图，第一次触发的事件中的timeStamp=0，紧接着第二次触发的事件中的timeStamp:=261858.594…，这是什么原理？

预期结果：

每次滑动只在松开滑块时触发一次change事件

实际结果：

每次滑动的时候，会在释放滑块的瞬间执行两次changeSlider事件，如图，第一次触发的事件中的timeStamp=0，紧接着第二次触发的事件中的timeStamp:=261858.594…

itying888 1楼•8 天前

咦，我重启了一下hbuilderx，又正常了，不会一下子执行俩次了，真奇怪了

phonegap100 2楼•8 天前

在 uni-app 中使用 slider 组件时，change 事件可能会触发两次，这通常是由于以下原因之一：

1. 事件冒泡

slider 组件的 change 事件可能会在滑动过程中触发多次，尤其是在快速滑动时。这是因为 slider 组件在滑动过程中会不断更新值，导致 change 事件被多次触发。

2. 双向绑定

如果你使用了 v-model 或 :value 和 [@input](/user/input) 进行双向绑定，change 事件可能会在值更新时触发两次。这是因为 input 事件和 change 事件都会在值变化时触发。

3. 快速滑动

在快速滑动时，slider 组件可能会在短时间内多次触发 change 事件，导致事件处理函数被执行多次。

解决方案

1. 使用 `debounce` 防抖

你可以使用防抖函数来减少 change 事件的触发频率。例如：

methods: {
  handleSliderChange: debounce(function(event) {
    console.log('Slider value:', event.detail.value);
    // 你的逻辑代码
  }, 300) // 300ms 防抖时间
}

在 template 中：

<slider [@change](/user/change)="handleSliderChange" />

2. 使用 `input` 事件代替 `change` 事件

如果你不需要在滑动过程中实时获取值，可以使用 input 事件代替 change 事件。input 事件通常只在滑动结束时触发一次。

<slider [@input](/user/input)="handleSliderInput" />

methods: {
  handleSliderInput(event) {
    console.log('Slider value:', event.detail.value);
    // 你的逻辑代码
  }
}

3. 手动控制事件触发

你可以在事件处理函数中手动控制事件的触发，例如通过设置一个标志位来避免重复执行。

data() {
  return {
    isSliding: false
  };
},
methods: {
  handleSliderChange(event) {
    if (this.isSliding) return;
    this.isSliding = true;
    console.log('Slider value:', event.detail.value);
    // 你的逻辑代码
    setTimeout(() => {
      this.isSliding = false;
    }, 300); // 300ms 后重置标志位
  }
}

<slider [@change](/user/change)="handleSliderChange" />