onReady() {
uni.getSystemInfo({
success: (res) => {
this.windowHeight = res.screenHeight;
// #ifdef MP-ALIPAY
this.windowHeight = res.screen.height;
// #endif
}
})
console.log('可视区高度已获取', this.windowHeight)
// #ifndef MP-ALIPAY
uni.createSelectorQuery().in(this).select('#page-wrap').boundingClientRect(node => {
this.contentHeight = node.height
console.log('页面高度已获取', this.contentHeight)
}).exec()
// #endif
// #ifdef MP-ALIPAY
// 这里支付宝小程序调用in方法时没有this
uni.createSelectorQuery().select('#page-wrap').boundingClientRect(node => {
this.contentHeight = node.height
console.log('cont', this.contentHeight);
}).exec()
// #endif
// #ifndef APP
let menuInfo = uni.getMenuButtonBoundingClientRect()
console.log('menu', menuInfo);
this.stickyTop = menuInfo.bottom + 10
this.titleInfo.top = menuInfo.top + 'px'
this.titleInfo.height = menuInfo.height + 'px'
console.log('小程序胶囊高度已获取', this.stickyTop)
// #endif
// #ifdef APP
let statusInfo = uni.getSystemInfoSync()
this.stickyTop = statusInfo.statusBarHeight
// #endif
this.listHeight = this.windowHeight - this.stickyTop
console.log('列表高度已获取', this.listHeight)
}
2***@qq.com
- 发布：2024-06-23 11:47
- 更新：2024-06-23 11:47
- 阅读：91
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 4.15
手机系统： Android
手机系统版本号： Android 14
手机厂商： OPPO
手机机型： REN1O2
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
在onready里获取可视区
在onready里获取可视区
预期结果：
获取到的可视区 可视区+最大页面滚动距离 = 页面高度
获取到的可视区 可视区+最大页面滚动距离 = 页面高度
实际结果：
获取到的可视区比预想的要高 可视区+最大页面滚动距离 < 页面高度
获取到的可视区比预想的要高 可视区+最大页面滚动距离 < 页面高度
bug描述：
微信小程序 3.4.3库
通过监听页面滚动距离 和 可视区距离 来计算页面最大高度来判断是否到达顶部 到达顶部时控制一个固定定位元素的显隐（这里用的是vif）
其他机型正常
但在oppo reno12 获取的可视区高度比预期的要小 导致即便页面滚动到底部了 也无法达到 页面滚动距离+可视区距离 >= 页面高度的条件
0 个回复