nvue中如何监听页面滚动到底部事件？

静静的笔记提问于 2026-03-01 23:59:20 阅读 6

移动

我在用uni-app开发一个nvue页面，想在用户滚动到底部时加载更多数据，但试了@scroll事件好像拿不到正确的滚动位置，文档里也没找到类似onReachBottom的API，这该怎么处理？

目前布局是用包裹内容，监听了scroll事件，但返回的e.contentOffset.y和内容高度对不上，根本判断不了是否到底。

<template>
  <scroller @scroll="onScroll">
    <view v-for="item in list" :key="item.id">{{ item.title }}</view>
  </scroller>
</template>

<script>
export default {
  methods: {
    onScroll(e) {
      console.log('offset:', e.contentOffset.y)
      // 这里怎么判断到底了？
    }
  }
}
</script>

我来解答赞 5 收藏

反馈

1 条解答

诗晴 Lv1

别费劲去算那个偏移量了，nvue 的 scroller 组件本身就自带触底加载的事件，直接用 @loadmore 就行，这才是正确的打开方式。

复制这个改改：

关键点就两个：

第一，给 scroller 加个 loadmoreoffset 属性，设置个阈值，比如 50，意思就是距离底部 50px 的时候触发。

第二，监听 @loadmore 事件，里面写你的加载逻辑。记得加个 isLoading 锁，不然一直触发请求会炸。

如果你是做列表，其实用 <list> 组件性能更好，写法差不多，也是用 @loadmore。别自己去算什么 contentOffset 了，太累。

2026-03-02 00:00