uni-app 软键盘在adjustResize模式下软键盘弹出并关闭后页面显示异常

uni-app 软键盘在adjustResize模式下软键盘弹出并关闭后页面显示异常

开发环境 版本号 项目创建方式
Windows 6.1.7601 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.1.13

手机系统：Android

手机系统版本号：Android 10

手机厂商：华为

手机机型：BKL-AL20

页面类型：vue

打包方式：云端

项目创建方式：HBuilderX

操作步骤：

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "测试一"
            }
        }
    ],
    "globalStyle": {
        "navigationStyle": "default",
        "navigationBarTextStyle": "white",
        "navigationBarTitleText": "testBug",
        "navigationBarBackgroundColor": "#40D4D2",
        "app-plus": {
            "bounce": "none",
            "background": "#f6f6f6",
            "scrollIndicator": "none",
            "softinputMode": "adjustResize"
        }
    }
}

<template>
    <view id="index_index">
        <view class="fx">
            <view class="send">发送</view>
            <input class="inp" type="text" value="" />
        </view>
        <view class="item" v-for="(v, k) in list">{{ v }}</view>
        <view class="item" v-for="(v, k) in 21">item{{ k }}</view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            list: [],
        };
    },
    onLoad(ags) {},
    onReady() {},
    onResize(res) {
        this.list.push(res.size.windowHeight);
    },
};
</script>

<style scoped>
.fx {
    background-color: #eee;
    padding: 25rpx;
}
.inp {
    background-color: #fff;
    border-radius: 6rpx;
    height: 80rpx;
    font-size: 30rpx;
    padding: 0 26rpx;
    margin-right: 150rpx;
}
.send {
    float: right;
    width: 130rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 30rpx;
    background-color: #40d4d2;
    color: #fff;
    border-radius: 8rpx;
}
.item {
    height: 80rpx;
    line-height: 80rpx;
    font-size: 28rpx;
    padding: 0 24rpx;
    border-bottom: 1rpx solid #ccc;
}
</style>

更多关于uni-app 软键盘在adjustResize模式下软键盘弹出并关闭后页面显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 软键盘在adjustResize模式下软键盘弹出并关闭后页面显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个在Android平台上使用adjustResize软键盘模式时的常见问题。当软键盘弹出和收起时，页面布局可能无法正确恢复，导致显示异常。

在你的代码中，通过onResize事件监听窗口高度变化并记录到list数组中，这显示窗口高度确实发生了变化但页面渲染未同步更新。

问题分析：

  1. adjustResize模式下，软键盘弹出会压缩页面可用高度
  2. 页面包含大量列表项（21个固定项+动态添加的list项），可能导致渲染性能问题
  3. 软键盘收起后，页面布局未能正确重排

解决方案：

  1. 强制重绘页面：在软键盘收起时调用this.$forceUpdate()
  2. 使用页面生命周期：在onShow或onResize中手动触发页面更新
  3. 优化页面结构：对长列表使用<scroll-view>或虚拟滚动
  4. 调整软键盘模式：可尝试使用adjustPan模式测试对比效果

建议在onResize事件中添加页面强制更新逻辑：

onResize(res) {
    this.list.push(res.size.windowHeight);
    this.$nextTick(() => {
        this.$forceUpdate();
    });
}
回到顶部