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

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

问题描述
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

  1. <template>
  2. <view class="content">
  3. <image class="logo" src="/static/logo.png"></image>
  4. <view class="text-area" @click="goAbout">
  5. <text class="title">{{ title }}</text>
  6. </view>
  7. <view style="height: 5000rpx"></view>
  8. </view>
  9. </template>
  10. <script>
  11. export default {
  12. data() {
  13. return {
  14. title: 'Hello',
  15. scrollTop: null
  16. };
  17. },
  18. // 注册列表滚动事件,用于判定在顶部可下拉刷新,在指定位置可显示隐藏回到顶部按钮 (此方法为页面生命周期,无法在子组件中触发, 仅在mescroll-body生效)
  19. onPageScroll(e) {
  20. this.scrollTop = e.scrollTop;
  21. console.log('onPageScroll scrollTop:', e.scrollTop);
  22. },
  23. onLoad() {},
  24. onShow() {
  25. console.log('onShow scrollTop:', this.scrollTop);
  26. },
  27. methods: {
  28. goAbout() {
  29. console.log('Go About');
  30. uni.navigateTo({ url: '/pages/about/about' });
  31. }
  32. }
  33. };
  34. </script>

page/about

  1. <template>
  2. <view>
  3. <view>About</view>
  4. </view>
  5. </template>
  6. <script>
  7. export default {
  8. data() {
  9. return {
  10. }
  11. },
  12. methods: {
  13. }
  14. }
  15. </script>
  16. <style>
  17. </style>
展开查看全部
jgzswidk

jgzswidk5#

vue2 的是吧,我排查一下

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

rkue9o1l

rkue9o1l6#

vue2 的是吧,我排查一下

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

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

2fjabf4q

2fjabf4q7#

vue3 也是一样

相关问题