h5 底部导航被虚拟键盘顶起

最新推荐文章于 2022-09-20 17:36:00 发布

转载最新推荐文章于 2022-09-20 17:36:00 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dxt510/p/8144230.html

文章标签：

#javascript #ViewUI

本文介绍了一个简单的网页底部导航栏的设计与实现过程，包括HTML结构定义、CSS样式设置及JavaScript交互逻辑。通过示例代码展示了如何创建一个响应式的底部导航栏，使其在窗口大小变化时能够自动调整显示。

1、html

<!--底部导航 -->
<nav class="nav">  
            <a href="javascript:;" style="color: #1084FB;">  
                <span class="mui-icon mui-icon-home"></span><br />
                <span>首页</span>  
            </a>  
            <a href="businessManage/rawMaterialslist.html">
                <span class="mui-icon mui-icon-bars"></span><br />  
                <span >原料申请</span>  
            </a> 
            <a href="businessManage/otherMateriallist.html">
                <span class="mui-icon mui-icon-list"></span><br />  
                <span>第三方申请</span>  
            </a>  
            <a href="login.html">  
                <span class="mui-icon mui-icon-contact"></span<br />
                <span>我的</span>  
            </a>  
 </nav>

2、css

.nav {
    width: 100%;
    border-top: 1px solid #EEEEEE;
    position: fixed;
    bottom: 1px;
    background-color: #fff;
    z-index: 2;
    text-align: center;
}
.nav a {
    display: inline-block;
    width: 23%;
    height: 46px;
    text-align: center;
    margin: 2px 0;
    color: #999999;
}
.nav a span:nth-child(3) {
    font-size: 13px;
}

3、js

/*获取底部导航到顶部的距离*/
var winHeight = $(window).height()-$(".nav").height();
$(window).resize(function(){  //窗口大小改变时
       //窗口大小改变时，获取当前的距离（底部导航到顶部）
        var resHeight = $(window).height()-$(".nav").height();
        if(resHeight!=winHeight) {
            $(".nav").hide();
        }else {
            $(".nav").show();
        }
});

转载于:https://www.cnblogs.com/dxt510/p/8144230.html