import {
onPageScroll,
onPullDownRefresh,
onReachBottom
} from '@dcloudio/uni-app'
onPageScroll(e => {
console.log("生效")
if (proxy.$refs.zpaging) {
proxy.$refs.zpaging.updatePageScrollTop(e.scrollTop);
if (e.scrollTop < 10) {
proxy.$refs.zpaging.doChatRecordLoadMore();
}
}
if (props.tabFixed) {
if (props.showRadiusBg) {
if (props.imgSrc) {
let scrollHeight = props.imgHeight - radiusBgHeight.value;
if (e.scrollTop >= scrollHeight) {
radiusBgFixed.value = false;
radiusBgArcValue.value = '0 0 0 0';
} else {
radiusBgFixed.value = true;
radiusBgArcValue.value = '0 0 50% 50%';
}
}
}
return;
} else {
let scrollHeight = uni.getWindowInfo().statusBarHeight + 45;
if (e.scrollTop < 0) {
pageTop.value = 0;
} else if (e.scrollTop >= 0 && e.scrollTop <= scrollHeight) {
let halfPageTop = scrollHeight / 2;
if (e.scrollTop <= halfPageTop) {
setStatusBarTheme(props.statusBarThemeDefault)
} else {
setStatusBarTheme(statusBarTheme.value)
}
pageTop.value = e.scrollTop.toFixed(2);
} else {
pageTop.value = scrollHeight;
}
}
})
123的秘密
- 发布：2023-04-06 11:58
- 更新：2023-04-07 17:33
- 阅读：434
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Win10 家庭版
HBuilderX类型： 正式
HBuilderX版本号： 3.7.12
手机系统： Android
手机系统版本号： Android 12
手机厂商： 小米
手机机型： 小米12
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
App下载地址或H5⽹址： https://static-mp-8c7f7d13-839f-4924-b207-321b5bd05217.next.bspapp.com/#/pages/main/farming/index
示例代码：
操作步骤：
H5或者真机运行，在三农服务页面都会出现这个问题【视频附件仅是展示具体项目的表现】，具体的复现测试Demo已经上传为附件【名称为测试】，可以通过上传的附件【名称为测试】来复现以上问题
H5或者真机运行，在三农服务页面都会出现这个问题【视频附件仅是展示具体项目的表现】，具体的复现测试Demo已经上传为附件【名称为测试】，可以通过上传的附件【名称为测试】来复现以上问题
预期结果：
页面滚动 onPageScroll里的代码正常执行，不存在延时或切换页面才生效
页面滚动 onPageScroll里的代码正常执行，不存在延时或切换页面才生效
实际结果：
h5端切换页面OnPageScroll的代码才生效，App端需要反复滚动，3-4秒才生效
h5端切换页面OnPageScroll的代码才生效，App端需要反复滚动，3-4秒才生效
bug描述：
onPageScroll的bug,h5端切换页面OnPageScroll的代码才生效，App端需要反复滚动，3-4秒才生效
首先，我们需要在代码中添加如下的代码段：
if (isApp) { // 判断是否是App端
setTimeout(() => {
// 滚动操作
}, 3000) // 延时3秒触发滚动
} else { // H5端代码
// 滚动操作
}通过这个代码段，我们可以解决这个非常诡异的问题。在App端中，我们需要添加一个延时操作，等待3秒后再触发滚动，这样就可以让onPageScroll的代码生效了。而在H5端则不需要添加延时操作，直接触发滚动即可。
或者参考：
在App端增加滚动事件的监听器，以确保onPageScroll事件能够及时触发。
在onPageScroll事件中添加节流函数，限制事件触发的频率，以避免性能问题。
使用其他滚动事件，如onTouchMove事件，来替代onPageScroll事件，以实现类似的功能。
使用 3.7.12 并没有复现你所说的问题，可以使用我提供的代码测试一下：
<template>
<view style="height: 1000px;" @touchstart="ontouchstart">
<text style="margin-top: 200px;display: block;">从接触页面到滑动开始的延迟 {{now}}</text>
</view>
</template>
<script setup>
import {
onPageScroll
} from '@dcloudio/uni-app'
let scroll = false
const now = ref(0)
const ontouchstart = () => {
if (!scroll)
now.value = Date.now()
}
onPageScroll(_ => {
if (!scroll) {
scroll = true
now.value = Date.now() - now.value
}
})
</script>-
-
回复 123的秘密: 使用了，看起来是触发正常，所以我又写了一个小的 demo 来测试一下触发的延迟，实际显示并没有延迟，你可以试试看呢？
2023-04-07 11:26
-
-
123的秘密 (作者)
回复 DCloud_UNI_LXH: 一定要下载测试的demo 移动端是反复滑动，等待三秒才有效果 h5端要切换页面才有效果 我这里是这样的 ，不可能在我这里异常，在你那里正常的
2023-04-07 17:43
123的秘密 (作者) - 程序猿
你用的小米手机吗 我这里是异常的 要不要我拍视频给你看
-
-
123的秘密 (作者)
回复 DCloud_UNI_LXH: 我觉得你是没有仔细研究吧 你下载名称为测试的demo压缩包，然后你在谷歌浏览器上运行项目，你可以看到是可以滚动的，但是不知道你有没有注意控制台的输出，你滚动页面时候控制台是没有任何输出的，说明onPageScroll根本没有在工作，然后你切换到测试的页面，再切换回来，然后滚动页面，控制台才有输出，这就是问题复现了啊，我这里修改一下，我把谷歌浏览器运行的效果上传到附件，你看一下
2023-04-08 17:48
-
123的秘密 (作者)
回复 DCloud_UNI_LXH: 附件已经上传，名称为h5端问题复现，您是管理员，应该能看到的，您下载下来看一下我结果和我所说的是否一致，另外，您说的测试延迟这个，是手机端的，我马上测试，然后再给您结果
2023-04-08 17:53
-
回复 123的秘密: 要验证一个bug，首先肯定要排除你的代码，所以我写了一个最小的示例，并没有发现你说的延迟问题。所以我希望你也可以使用最小示例测试一下，如果没有问题，那么你就可以去排查你所写代码了。不推荐在 onPageScroll 回调中进行复杂的计算，最好做一个节流操作
2023-04-11 15:35
123的秘密 (作者)
H5端更诡异 需要切换页面才会生效
2023-04-06 13:55
1***@qq.com
回复 123的秘密: 我也遇到了这个问题，把onPageScroll放到component组件中，然后再通过tabBar页面引入组件，就可以复现这个bug,奇怪的是通过uni.navigateTo()跳转到这个component组件是可以直接触发onPageScroll的。。很奇怪
2023-12-02 17:09