解决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; }
标签:flex,softinputMode,app,输入框,background,uni,页面 From: https://www.cnblogs.com/haonanZhang/p/17705039.html