解决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": {
		//手机软键盘升起不让其将页面头部上推
		"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,底部按钮固定高度。

  • 7
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值