uni-app
uni-app copied to clipboard
H5 点击跳转触发 onPageScroll 事件,scrollTop 为 0
问题描述 H5 点击跳转出发 onPageScroll 事件,scrollTop 为 0
复现步骤 [复现问题的步骤]
- 滚动页面向下
- 点击 跳转其他页面
- 查看 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/ 重现步骤:
- 向上滑动页面,查看日志输出 e.scrollTop 值
- 点击
Hello跳转页面,这是输出的 e.scrollTop 显示为 0 - 点击后退按钮,应用存储的 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 也是一样