uni-app onPageScroll()滚动监听 在特定条件下初次加载失效bug

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app onPageScroll()滚动监听 在特定条件下初次加载失效bug

产品分类：

uniapp/H5

开发环境 版本号 项目创建方式
Windows win11 HBuilderX

操作步骤：

<template>  
    <userHomePage></userHomePage>  
</template>

<script setup>  
    import { onPageScroll } from '@dcloudio/uni-app'  
    //滚动监听  
    onPageScroll(() => {  
        console.log('onPageScroll');  
    })  
</script>

预期结果：

预期结果为：初次加载tabBar页面模板中的component组件，onPageScroll()能够直接生效。

实际结果：

初次打开tabBar页面，component组件内容渲染出来，但是该component组件页面的onPageScroll()滚动监听是失效的，需要切换到其他任意页面再回来，onPageScroll()才能够生效

另外有一个点： 把onPageScroll()写在component组件中，然后再通过tabBar页面引入组件，就可以复现这个bug。 奇怪的是通过uni.navigateTo()跳转到这个component组件是可以直接触发onPageScroll()的。。很奇怪

！！！目前发现一个暂时的解决方案，tabBar页面中添加一个空的onPageScroll()，就能够触发嵌套的component的onPageScroll()。。。

bug描述：

tabBar页面模板中插入component组件，并在该组件内部设置onPageScroll()滚动监听， 初次打开tabBar页面，component组件内容渲染出来，但是该页面的onPageScroll()滚动监听是失效的， 此时切换到其他任意页面再回到tabBar页面，component组件的onPageScroll()滚动监听才会生效。 请官方复现一下。


Harmonyos Next教程
4 回复

还是大佬的这个临时方案有效,官方到现在还是没有回复这个bug啊


目前发现一个暂时的解决方案，tabBar页面中添加一个空的onPageScroll()，就能够触发嵌套的component的onPageScroll()。。。 这条亲测有效,解决了我的问题…

一直有这个问题，组件中引用生命周期不生效，需要在引用组件的页面也引用一下相同的生命周期函数，不光onPageScroll()，其它的生命周期也一样，你可以试试

针对您提到的 uni-app 中 onPageScroll() 方法在特定条件下初次加载失效的问题，这通常与页面的生命周期管理、事件绑定时机或组件状态初始化有关。以下是一个示例代码案例，展示如何在 uni-app 中正确设置和使用 onPageScroll() 方法，以确保其在页面初次加载时能够正常监听滚动事件。

示例代码

1. 页面结构（pages/index/index.vue）

<template>
  <view class="container">
    <scroll-view scroll-y="true" @scroll="handleScroll">
      <view class="content" :style="{ height: contentHeight + 'px' }">
        <!-- 模拟长内容 -->
        <view v-for="i in 100" :key="i" class="item">Item {{ i }}</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      contentHeight: 1500, // 模拟内容高度
      isScrollEnabled: true // 控制滚动监听是否启用
    };
  },
  mounted() {
    // 在mounted生命周期中启用滚动监听
    this.enableScrollListener();
  },
  methods: {
    enableScrollListener() {
      if (this.isScrollEnabled) {
        this.$mp.page.onPageScroll(this.handleScroll);
      }
    },
    handleScroll(e) {
      console.log('Scroll position:', e.scrollTop);
      // 在这里处理滚动事件，比如根据滚动位置调整某些UI元素
    }
  },
  beforeDestroy() {
    // 在页面销毁前移除滚动监听
    if (this.isScrollEnabled) {
      this.$mp.page.offPageScroll(this.handleScroll);
    }
  }
};
</script>

<style>
.container {
  height: 100vh;
  overflow: hidden;
}
.content {
  padding: 20px;
}
.item {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
  text-align: center;
}
</style>

说明

  1. 生命周期管理：在 mounted 钩子中启用滚动监听，确保 DOM 已经渲染完毕。
  2. 事件绑定：使用 this.$mp.page.onPageScroll() 绑定滚动事件，这是 uni-app 提供的原生页面滚动监听方法。
  3. 移除监听：在 beforeDestroy 钩子中移除滚动监听，避免内存泄漏。
  4. 条件控制：通过 isScrollEnabled 变量控制是否启用滚动监听，方便在特定条件下禁用或启用。

通过上述方法，可以有效避免 onPageScroll() 在初次加载时失效的问题。如果问题仍然存在，请检查是否有其他代码或组件影响了滚动事件的正常触发。

回到顶部