uni-app 软键盘弹出方式设置为adjustPan时 页面顶部在软键盘弹出来后无法看到

uni-app 软键盘弹出方式设置为adjustPan时 页面顶部在软键盘弹出来后无法看到

操作步骤:

软键盘没弹出来的时候上下滑动正常,能看见页面所有内容,弹出来后往上滑动顶部一部分看不见。

预期结果:

软键盘弹出来后上下滑动页面能看见页面所有内容。

实际结果:

软键盘弹出来后往上无法滑动,顶部一部分内容无法查看。

bug描述:

官方文档:adjustPan:软键盘弹出时,webview窗体高度不变,但窗体上推,以保证输入框不被软键盘盖住。 软键盘弹出来时,窗体上推,导致窗体顶部一部分内容无法看见。 附件是问题录屏,软键盘没弹出来的时候,整个页面上下滑动能看见所有内容,软键盘弹出来后,往上滑动头部就有一部分看不见。

信息类别 信息内容
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.2.12
手机系统 Android
手机系统版本号 Android 9.0
手机厂商 华为
手机机型 荣耀10
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

问题录屏.zip

App下载地址或H5网址


更多关于uni-app 软键盘弹出方式设置为adjustPan时 页面顶部在软键盘弹出来后无法看到的实战教程也可以访问 https://www.itying.com/category-93-b0.html

13 回复

希望官方给个回复,这是不是bug,如果不是的话,给个解决方法吧,

更多关于uni-app 软键盘弹出方式设置为adjustPan时 页面顶部在软键盘弹出来后无法看到的实战教程也可以访问 https://www.itying.com/category-93-b0.html


adjustPan 效果就是这样 具体可以看文档 https://uniapp.dcloud.io/component/input

那有方法可以在软键盘弹出来的时候上下滑动页面看全页面所有内容吗?本来软键盘弹出来的时候往下滑动页面,底部也有一部分看不全的,然后我在页面下边加了个软键盘高度的padding,就能看全底部内容。但是这个方法不适用在头部加个相同的padding,有没有别的什么办法可以解决一下的?

回复 6***@qq.com: vue 页面 softinputMode 为 adjustResize

回复 DCloud_Android_ST: 不要adjustResize模式,adjustResize模式会挡住输入框

回复 6***@qq.com: adjust-position=false 页面自身实现滚动位置。如果还是不行那就没办法了

回复 DCloud_Android_ST: 谢谢,我试试

回复 DCloud_Android_ST: 为啥软键盘弹出来的时候,页面看不全了?不是说webview窗体高度不变吗,是不是webview变短了?

回复 6***@qq.com: 窗口高度是固定的。webview内容超过窗口高度是可以滚动的

回复 DCloud_Android_ST: 窗口高度是不是就是手机屏幕的高度?webview就是我们所看见的APP页面是吗?

回复 6***@qq.com: webview窗口高度是原生view层。你只要关系webview的内容高度就行。

回复 DCloud_Android_ST: 不懂@@

这个问题是Android平台在adjustPan模式下软键盘弹起的典型表现。adjustPan模式的工作原理是保持Webview高度不变,通过上推整个窗体来确保输入框不被遮挡。这会导致窗体顶部内容被推出屏幕可视区域之外。

解决方案:

  1. 改用adjustResize模式(推荐): 在pages.json中配置页面样式:

    {
        "path": "pages/yourPage",
        "style": {
            "app-plus": {
                "softinputMode": "adjustResize"
            }
        }
    }
    

    此模式会压缩Webview高度,保持顶部内容可见。

  2. 监听软键盘状态手动调整: 如果必须使用adjustPan,可以通过监听软键盘事件,在键盘弹起时动态调整页面布局:

    // 监听键盘高度变化
    uni.onKeyboardHeightChange(res => {
        if (res.height > 0) {
            // 键盘弹起时,将需要保持可见的内容下移
            this.keyboardHeight = res.height;
        } else {
            this.keyboardHeight = 0;
        }
    })
    
  3. 使用scroll-view包裹内容: 将页面主要内容放入scroll-view,并设置合适的高度,确保内容可滚动查看。

  4. 针对特定机型的适配: 部分Android机型(特别是华为/荣耀)对adjustPan的实现有差异,可能需要单独处理。可以尝试在manifest.json中配置:

    "app-plus": {
        "softinputMode": "adjustResize"
    }
回到顶部