526互联

解决uni-app 输入框，键盘弹起时页面整体上移问题

发布时间 2023-09-15 15:04:44作者: haonanElva

解决uni-app 输入框，键盘弹起时页面整体上移问题

我们每次在做UNIAPP小程序和H5遇到输入框时，总会在测试的时候点击输入框弹出软键盘把页面往上移动，仔细翻读uniapp文档的时候发现了一个属性adjust-position ：Boolean类型，作用是键盘弹起时，是否自动上推页面

1.发现将adjust-position属性设置为false。就可以了。前提是vue 页面 softinputMode不能是为 adjustResize


2.这个softinputMode属性在page.json文件中，找到需要修改的页面配置，在app-plus中找到softinputMode属性，uniapp中默认属性值是adjustPan，
在pages.json里该页面注册的style里加上这段代码就能完美解决了

 

{
            "path" : "pages/chatDt/chatDt",
            "style" :{
                "navigationBarTitleText": "聊天详情",
                "navigationStyle": "custom",
                // #ifdef APP-PLUS
                "enablePullDownRefresh": false,
                // #endif
                "disableScroll": true,
                "app-plus": {
                    "scrollIndicator": false, //禁用原生导航栏
                    "softinputMode": "adjustResize"
                }
            }
        },

聊天界面的布局，可以不用fixed实现

 

<view class="warp">
        <view class="header"></view>
        <view class="body"></view>
        <view class="footer" @click="test">
            <view style="height: 44px;"></view>
            <view v-if="isshow" class="box"></view>
        </view>
    </view>
.warp{
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}
.header{
    height: 44px;
    background-color: red;
    width: 100%;
    display: flex;
}
.body{
    width: 100%; height: 100%;
    background-color: blue;
    flex: 1;
    display: flex;
    flex-shrink: 0;
    flex-grow: 1;
}
.footer{
    width: 100%;
    display: flex;
    background-color: yellow;
}
.box{
    height: 100px;
    width: 50%;
    background-color: green;
}