uni-app

uni-app copied to clipboard

问题描述 H5 点击跳转出发 onPageScroll 事件，scrollTop 为 0

复现步骤 [复现问题的步骤]

1. 滚动页面向下
2. 点击 跳转其他页面
3. 查看 log ，onPageScroll 事件，e.scrollTop 为 0

预期结果 e.scrollTop 应为滚动位置，或者点击跳转不触发 onPageScroll 事件，微信小程序就不触发，只有 H5 触发。

系统信息:

• 发行平台: 微信小程序、H5平台
• HBuilderX版本 3.3.11.20220209

补充信息 ios 是好的，微信小程序是好的，android h5 是错误的

提供一个示例看看

提供一个示例看看

示例地址：https://static-da65890c-8540-4b09-8700-77082cb82e61.bspapp.com/ 重现步骤：

1. 向上滑动页面，查看日志输出 e.scrollTop 值
2. 点击 Hello 跳转页面，这是输出的 e.scrollTop 显示为 0
3. 点击后退按钮，应用存储的 this.scrollTop 仍然为 0

测试工程发出来，部署好的项目我无法调试

抱歉，我不知道怎么把测试工程提供给你，这是我的代码，其实很简单。 page/index

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area" @click="goAbout">
      <text class="title">{{ title }}</text>
    </view>
    <view style="height: 5000rpx"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello',
      scrollTop: null
    };
  },
  // 注册列表滚动事件,用于判定在顶部可下拉刷新,在指定位置可显示隐藏回到顶部按钮 (此方法为页面生命周期,无法在子组件中触发, 仅在mescroll-body生效)
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
    console.log('onPageScroll scrollTop:', e.scrollTop);
  },
  onLoad() {},
  onShow() {
    console.log('onShow scrollTop:', this.scrollTop);
  },
  methods: {
    goAbout() {
      console.log('Go About');
      uni.navigateTo({ url: '/pages/about/about' });
    }
  }
};
</script>

page/about

<template>
  <view>
    <view>About</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      }
    },
    methods: {
      
    }
  }
</script>

<style>

</style>

vue2 的是吧，我排查一下

H5 可以暂时在 onShow 中使用 window.pageYOffset 获取一下

vue2 的是吧，我排查一下

H5 可以暂时在 onShow 中使用 window.pageYOffset 获取一下

是的，现在是这样处理的，这个后期等待更新就可以了吧？

vue3 也是一样