uni-app在快手小程序使用scroll-view滚动到底部事件触发时有一定几率触发scroll-view盒子点击事件

发布于 1周前 作者 yuanlaile 来自 Uni-App

uni-app在快手小程序使用scroll-view滚动到底部事件触发时有一定几率触发scroll-view盒子点击事件

在快手小程序使用scroll-view滚动到底部事件触发时有一定几率触发scroll-view盒子点击事件
在快手模拟器中用滚轮几乎百分百触发,用手势滚动有几率触发

ksbug.zip


1 回复

在uni-app中开发快手小程序时,遇到scroll-view滚动到底部事件触发时有一定几率触发scroll-view盒子点击事件的问题,通常是由于事件冒泡和事件处理顺序导致的。为了确保滚动到底部事件(即scrolltolower事件)不会误触发点击事件(clicktap事件),可以通过以下方式进行优化。

首先,确保你的scroll-view组件正确设置,并添加scrolltolower事件监听器。同时,为了区分事件,可以在点击事件处理函数中检查事件来源,避免滚动事件误触发点击事件。

以下是一个示例代码,展示了如何在uni-app中实现这一逻辑:

<template>
  <view>
    <scroll-view
      scroll-y="true"
      height="300px"
      @scrolltolower="onScrollToLower"
      ref="scrollView"
    >
      <view v-for="(item, index) in items" :key="index" class="item" @click="onItemClick(index)">
        {{ item }}
      </view>
      <!-- 添加足够多的项目以触发滚动 -->
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`)
    };
  },
  methods: {
    onScrollToLower() {
      console.log('Scroll to lower event triggered.');
      // 在这里处理滚动到底部的逻辑
    },
    onItemClick(index) {
      // 检查事件来源,避免滚动事件误触发
      const event = this.$refs.scrollView;
      // 假设有一个方法可以获取到scroll-view是否在滚动动画中
      // 这里仅作为示例,实际中需要实现或获取这个状态
      if (!this.isScrolling(event)) {
        console.log(`Item ${index} clicked.`);
        // 在这里处理点击事件的逻辑
      }
    },
    // 这是一个假设的方法,用于检测scroll-view是否在滚动
    isScrolling(scrollView) {
      // 实际实现中,可能需要监听scroll事件或使用其他方式判断滚动状态
      // 这里返回false仅作为示例
      return false;
    }
  }
};
</script>

<style>
.item {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ddd;
  text-align: center;
}
</style>

注意:

  1. 在实际开发中,isScrolling方法需要实现为能够检测scroll-view是否在滚动中的逻辑。这可能涉及到在scroll事件中维护一个滚动状态。
  2. 由于uni-app和快手小程序平台的限制,某些方法可能需要调整以适应平台特性。
  3. 上面的代码示例仅用于说明逻辑,实际项目中需要根据具体情况进行调整和优化。
回到顶部