uni-app Vue3-组合式api-onReachBottom在h5端无效

示例代码：

<template>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
<div>11111</div>  
</template>  

<script>  
import {  
  onReachBottom  
} from "@dcloudio/uni-app";  
export default {  
  setup() {  

    onReachBottom(() => {  
      console.log(11);  
    });  

    return {  };  
  },  
};  
</script>

操作步骤：

写代码运行，上拉，控制台打印11

预期结果：

控制台打印11

实际结果：

没有打印

bug描述：

onReachBottom在h5端无效

vueper 1楼

未复现此问题

sinazl 2楼

你的打印了？

wuwangju 3楼

回复碌云: 是的

songsunli 4楼

回复 DCloud_UNI_Anne: 那没道理啊，这边确实触发不了

eggper 5楼

回复碌云: 请提供简单可复现完整示例（上传附件）

bupafengyu 6楼

回复 DCloud_UNI_Anne: 解决了。。。。我重新建了个空项目发现可以了。你看我下面的评论

vueper 7楼

公共样式里面有一行： #app {
overflow-x: hidden;
} 导致onReachBottom无效，但是小程序端可以，服了。

h691938207 8楼

我也是这个问题。发现原因是因为在App.vue全局样式加了overflow-x: hidden; 去除页面滚动条的时候加的。去掉才能使onReachBottom生效，可是我又需要它来去除滚动条。大佬，你有不去掉这个的方法吗

bupafengyu 9楼

回复 3***@qq.com:

ionicwang 10楼

html { overflow: overlay; } body{ overflow-x: unset; }

wuwangju 11楼

我也碰到这个问题了。莫名其妙的。去掉样式也不行

bupafengyu 12楼

在 uni-app 中使用 Vue3 的组合式 API 时，onReachBottom 生命周期钩子在 H5 端无效的问题，通常是由于 H5 端的滚动行为与小程序端不同导致的。onReachBottom 在小程序端是原生支持的，但在 H5 端，uni-app 并没有自动处理页面滚动到底部的事件。

解决方案

为了在 H5 端实现类似 onReachBottom 的功能，你可以手动监听页面的滚动事件，并在滚动到底部时触发相应的逻辑。

以下是一个示例代码：

<template>
  <view class="container">
    <!-- 你的内容 -->
    <view v-for="item in list" :key="item.id">{{ item.text }}</view>
    <view v-if="loading">加载中...</view>
  </view>
</template>

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

const list = ref([]);
const loading = ref(false);
const page = ref(1);

// 模拟加载数据
const loadMoreData = async () => {
  if (loading.value) return;
  loading.value = true;
  // 模拟异步请求
  setTimeout(() => {
    const newData = Array.from({ length: 10 }, (_, i) => ({
      id: list.value.length + i + 1,
      text: `Item ${list.value.length + i + 1}`,
    }));
    list.value = [...list.value, ...newData];
    page.value += 1;
    loading.value = false;
  }, 1000);
};

// 监听滚动事件
const handleScroll = () => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
  const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

  if (scrollTop + windowHeight >= scrollHeight - 50) {
    loadMoreData();
  }
};

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
  loadMoreData(); // 初始加载数据
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>

<style>
.container {
  padding: 20px;
}
</style>