本章节介绍微信weui的组件tabbar，在前面那么多章节已经详细说了，本章节就不在累述，直接上实例吧
实例
1，新建tabbar.html页面，引入css文件样式
<link rel="stylesheet" href="https://weui.io/weui.css"> <link rel="stylesheet" href="https://weui.io/example.css">
记得html设置成移动手机端浏览
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
2，引入jquery库依赖
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
3，在<body></body>之间添加如下代码
<div class="page tabbar js_show"> <div class="page__bd" style="height: 100%;"> <div class="weui-tab"> <div class="weui-tab__panel"> </div> <div class="weui-tabbar"> <a href="javascript:;" class="weui-tabbar__item weui-bar__item_on"> <span style="display: inline-block;position: relative;"> <img src="https://weui.io/images/icon_tabbar.png" alt="" class="weui-tabbar__icon"> <span class="weui-badge" style="position: absolute;top: -2px;right: -13px;">8</span> </span> <p class="weui-tabbar__label">微信</p> </a> <a href="javascript:;" class="weui-tabbar__item"> <img src="https://weui.io/images/icon_tabbar.png" alt="" class="weui-tabbar__icon"> <p class="weui-tabbar__label">通讯录</p> </a> <a href="javascript:;" class="weui-tabbar__item"> <span style="display: inline-block;position: relative;"> <img src="https://weui.io/images/icon_tabbar.png" alt="" class="weui-tabbar__icon"> <span class="weui-badge weui-badge_dot" style="position: absolute;top: 0;right: -6px;"></span> </span> <p class="weui-tabbar__label">发现</p> </a> <a href="javascript:;" class="weui-tabbar__item"> <img src="https://weui.io/images/icon_tabbar.png" alt="" class="weui-tabbar__icon"> <p class="weui-tabbar__label">我</p> </a> </div> </div> </div> </div>
4，JavaScript代码
最好放在</body>后面
<script type="text/javascript" class="tabbar js_show">
$(function(){
$('.weui-tabbar__item').on('click', function () {
$(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
});
});
</script>5，效果
5，完整html代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>www.vxzsk.comV型知识库</title>
</head>
<link rel="stylesheet" href="https://weui.io/weui.css">
<link rel="stylesheet" href="https://weui.io/example.css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<body>
<div class="page tabbar js_show">
<div class="page__bd" style="height: 100%;">
<div class="weui-tab">
<div class="weui-tab__panel">
</div>
<div class="weui-tabbar">
<a href="javascript:;" class="weui-tabbar__item weui-bar__item_on">
<span style="display: inline-block;position: relative;">
<img src="https://weui.io/images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
<span class="weui-badge" style="position: absolute;top: -2px;right: -13px;">8</span>
</span>
<p class="weui-tabbar__label">微信</p>
</a>
<a href="javascript:;" class="weui-tabbar__item">
<img src="https://weui.io/images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
<p class="weui-tabbar__label">通讯录</p>
</a>
<a href="javascript:;" class="weui-tabbar__item">
<span style="display: inline-block;position: relative;">
<img src="https://weui.io/images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
<span class="weui-badge weui-badge_dot" style="position: absolute;top: 0;right: -6px;"></span>
</span>
<p class="weui-tabbar__label">发现</p>
</a>
<a href="javascript:;" class="weui-tabbar__item">
<img src="https://weui.io/images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
<p class="weui-tabbar__label">我</p>
</a>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" class="tabbar js_show">
$(function(){
$('.weui-tabbar__item').on('click', function () {
$(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
});
});
</script>
</html>
此文章本站原创，地址 https://www.vxzsk.com/1087.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程
上一篇：python 文档测试
下一篇：1.5、认识html文件基本结构
^