JQuery WEUI Tabbar 的坑
JQuery WeUi Tabbar 不在底部显示
其实就是因为 JQuery WeUI 没有定义 html, body 的高度,所以给其定义个 height: 100%; 就可以了!
就像这样就行
<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
<style>html,body{height: 100%;}</style>
</head>
<body>
<div class="weui-tab">
<div class="weui-tab__bd">
<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
<h1>页面一</h1> </div>
<div id="tab2" class="weui-tab__bd-item">
<h1>页面二</h1> </div>
<div id="tab3" class="weui-tab__bd-item">
<h1>页面三</h1>
</div>
<div id="tab4" class="weui-tab__bd-item">
<h1>页面四</h1> </div>
</div>
<div class="weui-tabbar">
<a href="#tab1" class="weui-tabbar__item weui-bar__item--on">
<div class="weui-tabbar__icon">
<i class="weui-icon-circle"></i>
</div>
<p class="weui-tabbar__label">首页</p>
</a>
<a href="#tab2" class="weui-tabbar__item">
<div class="weui-tabbar__icon">
<i class="weui-icon-search"></i>
</div>
<p class="weui-tabbar__label">搜索</p>
</a>
<a href="#tab3" class="weui-tabbar__item">
<div class="weui-tabbar__icon">
<i class="weui-icon-success"></i>
</div>
<p class="weui-tabbar__label">登录</p>
</a>
<a href="#tab4" class="weui-tabbar__item">
<i class="weui-icon-info-circle"></i>
<p class="weui-tabbar__label">用户</p>
</a>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/city-picker.min.js"></script>