uni-app 输入框设置:adjust-position="false" 时,ios弹出键盘页面动态设置paddingBottom后,调用uni.pageScrollTo滚动到最底部失效的问题

发布于 1周前 作者 yuanlaile 来自 Uni-App

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滚动到最底部失效的问题


3 回复

遇到了同样的问题,请问解决了吗

在使用 uni-app 开发时,如果你在 iOS 设备上设置了输入框的 adjust-position="false",并且在键盘弹出时动态设置了页面的 paddingBottom,可能会导致调用 uni.pageScrollTo 滚动到页面底部失效的问题。这是由于 iOS 键盘弹出时,页面布局的变化导致的。

问题分析

  1. adjust-position="false": 这个属性设置为 false 时,输入框在聚焦时不会自动调整页面的滚动位置,键盘弹出时页面内容不会被顶起。
  2. 动态设置 paddingBottom: 当键盘弹出时,你可能会动态设置页面的 paddingBottom 来避免内容被键盘遮挡。
  3. 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
});
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!