uni-app 快手小程序中scroll-view触底有几率触发里边盒子的点击事件

在uni-app开发快手小程序时，遇到scroll-view触底（到底部）时偶尔触发内部盒子（例如按钮或可点击元素）的点击事件，通常是由于滚动事件的冒泡或者处理不当的触底检测逻辑导致的。我们可以通过一些技术手段来避免这种情况。

以下是一个简化的代码示例，展示如何在scroll-view中处理触底事件，同时避免误触发内部元素的点击事件。

HTML模板

<template>
  <view>
    <scroll-view 
      scroll-y="true" 
      @scrolltolower="handleScrollToLower"
      style="height: 100vh;">
      <view v-for="(item, index) in items" :key="index" class="item">
        <button @click="handleClick(item)">{{ item.name }}</button>
      </view>
      <!-- 模拟大量内容 -->
      <view v-for="i in 50" :key="i" class="dummy-content">更多内容...</view>
    </scroll-view>
  </view>
</template>

JavaScript逻辑

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Item 1' },
        { name: 'Item 2' },
        // 更多项目...
      ],
      scrollTimeout: null, // 用于防抖处理
    };
  },
  methods: {
    handleScrollToLower() {
      // 清除之前的防抖定时器
      if (this.scrollTimeout) clearTimeout(this.scrollTimeout);
      // 设置防抖定时器，避免快速滚动时多次触发
      this.scrollTimeout = setTimeout(() => {
        console.log('Scroll to lower boundary');
        // 在这里处理触底逻辑，比如加载更多数据
      }, 300); // 300ms 防抖时间
    },
    handleClick(item) {
      console.log('Clicked:', item.name);
    },
  },
};
</script>

CSS样式

<style scoped>
.item {
  padding: 16px;
  border-bottom: 1px solid #ddd;
}
.dummy-content {
  padding: 16px;
  color: #888;
}
button {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 4px;
}
</style>

说明

1. 防抖处理：在handleScrollToLower方法中，我们使用了一个防抖定时器来避免在快速滚动时多次触发触底事件。这有助于减少误触发的几率。
2. 事件处理隔离：确保点击事件（@click）与滚动事件（@scrolltolower）的处理逻辑是独立的，避免相互干扰。

通过上述方法，可以有效减少在scroll-view触底时误触发内部元素点击事件的情况。如果问题依然存在，可能需要进一步检查具体的事件触发顺序和逻辑处理。