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

  • 相关阅读:
    Bootstrap
    Asp.Net母版页的相关知识
    连接Access数据库的连接字符串
    登录界面更换验证码图片
    .NET中string与StringBuilder在字符串拼接功能上的比较
    Asp.Net(C#)使用oleDbConnection 连接Excel
    非常规方法实现添加合并列
    ASP.Net页面间变量值传递的方法
    eclipse配置class注释模板
    spring中web.xml指定配置文件
  • 原文地址:https://www.cnblogs.com/zjy850984598/p/10638486.html
Copyright © 2020-2023  润新知