uni-app H5 点击跳转触发 onPageScroll 事件,scrollTop 为 0

dba5bblo  于 5个月前  发布在  uni-app
关注(0)|答案(7)|浏览(44)

问题描述
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 是错误的

rjzwgtxy

rjzwgtxy1#

提供一个示例看看

iezvtpos

iezvtpos2#

提供一个示例看看

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

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

xriantvc3#

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

wpcxdonn

wpcxdonn4#

抱歉,我不知道怎么把测试工程提供给你,这是我的代码,其实很简单。
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>
jgzswidk

jgzswidk5#

vue2 的是吧,我排查一下

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

rkue9o1l

rkue9o1l6#

vue2 的是吧,我排查一下

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

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

相关问题