uni-app vue3 nvue onReachBottom 页面触底事件不触发

在 uni-app 中使用 vue3 开发 nvue 页面时，onReachBottom 事件不触发可能是由于以下几个原因导致的。以下是一些常见的排查和解决方法：

1. 确保页面结构正确

onReachBottom 事件通常是在页面内容滚动到底部时触发的。确保你的页面内容足够长，能够触发滚动事件。如果页面内容不足以滚动，onReachBottom 事件自然不会触发。

<template>
  <view class="content">
    <!-- 确保内容足够长 -->
    <view v-for="item in list" :key="item">{{ item }}</view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const list = ref(Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`));

// 监听页面触底事件
onReachBottom(() => {
  console.log('页面触底');
  // 加载更多数据
});
</script>

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

2. 确保 onReachBottom 在正确的位置

onReachBottom 应该在页面的 script 部分直接定义，而不是在某个方法或生命周期钩子中。

onReachBottom(() => {
  console.log('页面触底');
  // 加载更多数据
});

3. 检查 nvue 页面的滚动容器

在 nvue 页面中，默认的滚动容器是 scroll-view 或 list 组件。如果你使用了自定义的滚动容器，确保它能够正确触发 onReachBottom 事件。

<template>
  <scroll-view scroll-y="true" @scrolltolower="onReachBottom">
    <view v-for="item in list" :key="item">{{ item }}</view>
  </scroll-view>
</template>

<script setup>
import { ref } from 'vue';

const list = ref(Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`));

const onReachBottom = () => {
  console.log('页面触底');
  // 加载更多数据
};
</script>

4. 检查 nvue 页面的样式

确保页面的样式没有阻止滚动。例如，height: 100vh 和 overflow-y: auto 是常见的样式设置，以确保页面内容可以滚动。

.content {
  height: 100vh;
  overflow-y: auto;
}

5. 检查 nvue 页面的生命周期

确保 onReachBottom 在页面生命周期中正确注册。如果你在 onLoad 或 onShow 中动态加载数据，确保数据加载完成后页面内容足够长。

onLoad(() => {
  // 加载初始数据
  loadData();
});

const loadData = () => {
  // 模拟数据加载
  setTimeout(() => {
    list.value = Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`);
  }, 1000);
};

6. 检查 nvue 页面的滚动事件

如果你使用了自定义的滚动事件，确保它们不会干扰 onReachBottom 的触发。

onPageScroll((e) => {
  console.log('页面滚动', e);
});

7. 检查 nvue 页面的版本兼容性

确保你使用的 uni-app 版本支持 onReachBottom 事件。如果你使用的是较旧的版本，可能需要升级到最新版本。

8. 调试和日志

在 onReachBottom 中添加日志，确保事件被正确触发。如果事件没有被触发，检查是否有其他代码或样式阻止了事件的触发。

onReachBottom(() => {
  console.log('页面触底');
  // 加载更多数据
});