uni-app中如何监听页面滚动到底部？

Mc.富水提问于 2026-03-10 09:08:20 阅读 2

移动

我在uni-app里做了一个上拉加载更多的功能，但用@scrolltolower有时候不触发，尤其是在H5端。试过给scroll-view加了:scroll-y="true"和固定高度，还是不行，到底该怎么正确监听页面滚动到底部啊？

我的代码大概是这样的：

<scroll-view 
  :scroll-y="true" 
  @scrolltolower="loadMore" 
  style="height: 100vh;"
>
  <view v-for="item in list" :key="item.id">{{ item.title }}</view>
</scroll-view>

我来解答赞 3 收藏

反馈

1 条解答

ლ雪瑞 Lv1

这个坑我也踩过，uni-app的滚动监听确实有点玄学。说几个关键点：

首先H5端用scroll-view确实容易出问题，建议直接用页面的onReachBottom生命周期，这个在H5和小程序都管用：

export default {

  onReachBottom() {

    this.loadMore()

  },

  methods: {

    loadMore() {

      // 你的加载逻辑

    }

  }

}

如果非要用scroll-view，注意几个细节：
1. 高度不能用100vh，要用具体像素值，比如600px
2. 确保外层容器有overflow:hidden
3. 在H5端可能需要手动设置-webkit-overflow-scrolling:touch

还有一种偏方是用IntersectionObserver API，虽然要写更多代码但更可靠：

mounted() {

  this.$nextTick(() => {

    const observer = new IntersectionObserver(entries => {

      if (entries[0].isIntersecting) {

        this.loadMore()

      }

    })

    observer.observe(document.querySelector('.last-item'))

  })

}

最后吐槽一句，uni-app的滚动相关API在不同平台表现不一致真是老毛病了，建议优先用onReachBottom省心。

2026-03-10 09:10