解决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里加上这段代码就能完美解决了
"style": { "navigationBarTitleText": "对话详情", "enablePullDownRefresh": true, //手机软键盘升起不让其将页面头部上推 "app-plus": { "softinputMode": "adjustResize" } }
softinputMode的值为adjustResize时,屏幕高度=整个页面高度+软键盘高度,,,为adjustPan时,整个页面高度不变,但键盘弹出后页面会上移
其它思路
移动端h5页面经常会遇到软键盘顶起底部fixed定位元素,体验不好。记录下uni-app下同样的问题是如何解决的。
解决思路:获取窗口尺寸,监听窗口尺寸变化,比较变化后窗口的尺寸和实际窗口尺寸的大小做相应处理。直接上代码:
<!--html--> <input type="text" @click="hideTabbar" @focus="hideTabbar" @blur="showTabbar" placeholder=""/> <view v-if="tabbar">底部悬浮</view> data(){ return{ tabbar: true, windowHeight: '' } }, onLoad() { uni.getSystemInfo({ success: (res)=> { this.windowHeight = res.windowHeight; } }); uni.onWindowResize((res) => { if(res.size.windowHeight < this.windowHeight){ this.tabbar = false }else{ this.tabbar = true } }) }, methosd:{ showTabbar(){ this.tabbar = true; }, hideTabbar(){ this.tabbar = false; } }
@click和@blur 分别解决安卓和ios 兼容问题
=====================================================================================
ps:可以利用弹性布局,中间flex为1,底部按钮固定高度。