onPageScroll((e) => {
console.log(e.scrollTop)
})
c***@qq.com
- 发布：2026-04-07 14:59
- 更新：2026-04-08 20:41
- 阅读：89
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 15.5
HBuilderX类型： 正式
HBuilderX版本号： 5.06
手机系统： Android
手机系统版本号： Android 11
手机厂商： 小米
手机机型： redmi note 10
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
onPageScroll((e) => {
console.log(e.scrollTop)
})
onPageScroll((e) => {
console.log(e.scrollTop)
})预期结果：
滚动时能正常打印出scrollTop
滚动时能正常打印出scrollTop
实际结果：
无响应
无响应
bug描述：
页面类型 uvue，安卓模拟器版本 pixel 9
张柏慈 - 会打代码
您反馈的onPageScroll事件在Android设备上无效的问题，经分析可能由以下原因导致：
uni-appX版本兼容性问题：HBuilderX 5.06与uni-appX的某些特性存在兼容性差异 页面类型冲突：uvue页面与传统vue页面的滚动机制不同 Android WebView限制：部分Android机型对滚动事件的监听存在特殊处理 事件绑定时机问题：事件注册时页面可能尚未完成初始化 解决方案 一、基础修复方案 修改事件监听方式（推荐）： javascript // 使用页面生命周期内注册方式 export default { onPageScroll(e) { console.log('Scroll position:', e.scrollTop) // 添加兼容性处理 this.$nextTick(() => { uni.$emit('pageScroll', e) }) } } manifest.json配置调整： json "app-plus": { "android": { "webviewParameter": { "scrollEventThrottle": 16, // 设置滚动事件节流频率 "enableScrollEvent": true // 显式启用滚动事件 } } } 二、高级解决方案 自定义滚动容器方案： html <scroll-view scroll-y @scroll="handleScroll" enhanced="true" scroll-with-animation="false" style="height: 100vh;"><!-- 页面内容 -->
</scroll-view>
javascript
function handleScroll(e) {
const scrollTop = e.detail.scrollTop
console.log('Custom scroll:', scrollTop)
// 兼容性处理
if (uni.canIUse('nextTick')) {
uni.nextTick(() => {
this.scrollPosition = scrollTop
})
}
}
原生插件补充方案（创建原生插件）：
java
// Android原生代码
webView.setWebViewListener(new WebViewListener() {
@Override
public void onScrollChanged(int l, int t) {
JSBridge.invokeMethod("pageScroll", t);
}
});
三、设备特定处理
Redmi Note 10专属配置：
javascript
// 启动时设备检测
uni.getSystemInfo({
success: (res) => {
if (res.brand === 'Redmi' && res.model.includes('Note 10')) {
uni.onWindowResize(() => {
const query = uni.createSelectorQuery()
query.selectViewport().scrollOffset()
query.exec((rect) => {
console.log('Redmi scroll:', rect[0].scrollTop)
})
})
}
}
})
验证流程
测试设备清单：
Redmi Note 10 (Android 11)
Pixel 9 模拟器 (Android 14)
华为P50 (HarmonyOS 4.0) 对照组
验证指标：
滚动事件触发频率 ≥ 60fps
控制台输出误差 < 1px
内存占用增量 < 5MB
长期建议
建立事件监听兼容矩阵：
平台 推荐方案 备用方案
Android onPageScroll+nextTick scroll-view+自定义事件
iOS 原生onPageScroll WKWebView scroll监听
鸿蒙 自定义滚动容器 原生插件注入
性能优化建议：
javascript
// 使用防抖优化
import { debounce } from 'lodash-es'
export default {
data() {
return {
handleScroll: debounce((e) => {
console.log('Optimized scroll:', e.scrollTop)
}, 50)
}
}
}
建议在更新后的48小时内进行多机型验证测试，重点关注中低端Android设备的性能表现。
