uniapp 移动端键盘弹起导致页面fixed定位元素布局失效

错误情况：

移动端键盘弹起导致页面fixed定位元素布局失效,元素被软键盘顶上去

原因:

当用户进行表单输入时，手机软键盘弹起，此时页面的尺寸发生变化，底部fixed定位的元素自然也会上移，可能就会覆盖页面中的某些元素。

解决方案:

监听尺寸变化决定展示或隐藏元素

// data里声明变量
data() {
    return {
        docmHeight: document.documentElement.clientHeight ||document.body.clientHeight,
        showHeight: document.documentElement.clientHeight ||document.body.clientHeight,
        hideshow:true  //显示或者隐藏footer
    }
}
// 监听页面高度
watch: {
    //监听显示高度
    showHeight:function() {
        if(this.docmHeight > this.showHeight){
            //隐藏
            this.hideshow=false
        }else{
            //显示
            this.hideshow=true
        }
    }
},
 
mounted() {
    //监听事件
    window.onresize = ()=>{
        return(()=>{
            this.showHeight = document.documentElement.clientHeight || document.body.clientHeight;
        })()
    }
}
// 设置元素的显示与隐藏
<view v-show="hideshow">确认操作</view>

参考链接：blog.csdn.net/weixin_4511…