uni-app 输入框设置:adjust-position="false" 时,ios弹出键盘页面动态设置paddingBottom后,调用uni.pageScrollTo滚动到最底部失效的问题
uni-app 输入框设置:adjust-position=“false” 时,ios弹出键盘页面动态设置paddingBottom后,调用uni.pageScrollTo滚动到最底部失效的问题
开发环境 | 版本号 | 项目创建方式 |
---|---|---|
Windows | win10 | HBuilderX |
iOS | iOS 17 | |
iPhone XR |
产品分类:
uniapp/App
PC开发环境操作系统:
Windows
HBuilderX类型:
正式
HBuilderX版本号:
3.98
手机系统:
iOS
手机系统版本号:
iOS 17
手机厂商:
苹果
手机机型:
iPhone XR
页面类型:
vue
vue版本:
vue2
打包方式:
云端
操作步骤:
- 点击输入框 弹出键盘 页面滑到最底部
预期结果:
- 点击输入框 弹出键盘 页面滑到最底部
实际结果:
- 点击输入框 弹出键盘 页面滑到失效
bug描述:
输入框设置:adjust-position=“false” ios弹出键盘 页面动态设置他的paddingBottom 调用uni.pageScrollTo滚动到最底部失效的问题
解决了吗
遇到了同样的问题,请问解决了吗
在使用 uni-app
开发时,如果你在 iOS 设备上设置了输入框的 adjust-position="false"
,并且在键盘弹出时动态设置了页面的 paddingBottom
,可能会导致调用 uni.pageScrollTo
滚动到页面底部失效的问题。这是由于 iOS 键盘弹出时,页面布局的变化导致的。
问题分析
adjust-position="false"
: 这个属性设置为false
时,输入框在聚焦时不会自动调整页面的滚动位置,键盘弹出时页面内容不会被顶起。- 动态设置
paddingBottom
: 当键盘弹出时,你可能会动态设置页面的paddingBottom
来避免内容被键盘遮挡。 uni.pageScrollTo
失效: 由于键盘弹出时页面的布局发生了变化,uni.pageScrollTo
可能无法正确计算滚动位置,导致滚动失效。
解决方案
为了确保 uni.pageScrollTo
在键盘弹出后能够正确滚动到页面底部,你可以尝试以下几种方法:
方法一:延迟执行 uni.pageScrollTo
在键盘弹出后,延迟一段时间再执行 uni.pageScrollTo
,以确保页面布局已经稳定。
setTimeout(() => {
uni.pageScrollTo({
scrollTop: 100000, // 设置为一个足够大的值以确保滚动到最底部
duration: 300
});
}, 300); // 延迟 300ms
方法二:手动计算滚动位置
在键盘弹出后,手动计算页面的滚动位置,并调用 uni.pageScrollTo
。
const query = uni.createSelectorQuery().in(this);
query.select('#page-content').boundingClientRect(rect => {
const scrollTop = rect.height - window.innerHeight;
uni.pageScrollTo({
scrollTop: scrollTop,
duration: 300
});
}).exec();
方法三:使用 uni.onKeyboardHeightChange
监听键盘高度变化
通过监听键盘高度变化,动态调整页面布局并执行滚动。
uni.onKeyboardHeightChange(res => {
const keyboardHeight = res.height;
this.setData({
paddingBottom: keyboardHeight + 'px'
});
setTimeout(() => {
uni.pageScrollTo({
scrollTop: 100000, // 设置为一个足够大的值以确保滚动到最底部
duration: 300
});
}, 300); // 延迟 300ms
});