----uni-app之解决底部按钮绝对定位后被软键盘推起的bug----

Posted zjy850984598

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了----uni-app之解决底部按钮绝对定位后被软键盘推起的bug----相关的知识,希望对你有一定的参考价值。

移动端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,底部按钮固定高度。

以上是关于----uni-app之解决底部按钮绝对定位后被软键盘推起的bug----的主要内容,如果未能解决你的问题,请参考以下文章

Mui WebApp页面 绝对定位 软键盘弹出时顶起底部按钮问题

EditText底部边框被软键盘挡住的问题

将按钮置于底部上方

uni-app点击按钮底部弹出提示框-uni.showActionSheet(OBJECT)

uni-app 自定义组件ADTabBar 底部导航栏 支持中间自定义按钮 支持小程序

移动端中 H5输入框在弹起键盘后被遮挡