uni-app 使用滚动到底事件时 页面滚动中点击事件失效

在 uni-app 中使用滚动到底事件时，如果页面在滚动过程中点击事件失效，可能是由于滚动事件和点击事件的冲突导致的。以下是一些可能的原因和解决方案：

1. 滚动事件与点击事件的冲突

在移动端，滚动和点击事件可能会产生冲突。特别是在快速滚动时，系统可能会优先处理滚动事件，导致点击事件被忽略。

2. 解决方案

2.1 使用 @scroll 事件代替 @scrolltolower

@scrolltolower 事件是当页面滚动到底部时触发的，但如果你在滚动过程中需要处理点击事件，可以考虑使用 @scroll 事件来监听滚动状态，并在适当的时机处理点击事件。

<template>
  <view class="container" @scroll="handleScroll">
    <!-- 页面内容 -->
    <view @click="handleClick">点击我</view>
  </view>
</template>

<script>
export default {
  methods: {
    handleScroll(event) {
      // 处理滚动事件
      console.log('正在滚动', event);
    },
    handleClick() {
      // 处理点击事件
      console.log('点击事件触发');
    }
  }
}
</script>

<style scoped>
.container {
  height: 100vh;
  overflow-y: scroll;
}
</style>

2.2 使用 @touchstart 和 @touchend 事件

你可以在 @touchstart 和 @touchend 事件中处理点击事件，这样可以避免滚动事件对点击事件的干扰。

<template>
  <view class="container">
    <!-- 页面内容 -->
    <view @touchstart="handleTouchStart" @touchend="handleTouchEnd">点击我</view>
  </view>
</template>

<script>
export default {
  methods: {
    handleTouchStart() {
      // 处理触摸开始事件
      console.log('触摸开始');
    },
    handleTouchEnd() {
      // 处理触摸结束事件
      console.log('触摸结束');
    }
  }
}
</script>

<style scoped>
.container {
  height: 100vh;
  overflow-y: scroll;
}
</style>

2.3 使用 @tap 事件

uni-app 提供了 @tap 事件，它是在用户点击屏幕时触发的，且不会受到滚动事件的影响。

<template>
  <view class="container">
    <!-- 页面内容 -->
    <view @tap="handleTap">点击我</view>
  </view>
</template>

<script>
export default {
  methods: {
    handleTap() {
      // 处理点击事件
      console.log('点击事件触发');
    }
  }
}
</script>

<style scoped>
.container {
  height: 100vh;
  overflow-y: scroll;
}
</style>