uni-app中生命周期函数onReachBottom无法触发

最新推荐文章于 2025-06-08 23:13:47 发布

原创最新推荐文章于 2025-06-08 23:13:47 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

在uni-app中，当页面高度小于等于屏幕高度时，onReachBottom生命周期函数不会触发。为解决这个问题，需调整样式使页面高度略大于屏幕高度，确保在滑动触底时能正确触发函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：uni-app中生命周期函数onReachBottom无法触发

问题重现：

未设置onReachBottomDistance的情况下
代码如下，数据展示正好在页面的顶部和底部，一直向上滑，触底，但控制台并不输出1

<script setup lang="ts">
onReachBottom(function () {
  console.log(1)
});
</script>
<template>
  <view v-for="(item, index) in list" style="margin-bottom: 60vh">
      <view>{{ item.name }}</view>
      <view>{{ item.phoneNumber }}</view>    
      <view>{{ ... }}</view>
  </view>
</template>

解决办法：

调整样式

理由：

当页面展示高度小于等于屏幕高度时，触发不了onReachBottom，只需设置页面展示高度稍微大于屏幕高度时，在滑动触底时即可触发该函数。