本章节我们来介绍微信weui导航组件中的navbar,navbar组件效果使用了jquery，所以案例依赖于jquery库大家注意。按照下面的步骤就可以做出网页效果，案例中引用的微信weui的css样式库我已经上传到百度网盘了，地址 http://pan.baidu.com/s/1cvQlLc ，大家可以下载下来进行引用，当然你也可以引用网络地址，但是有个弊端，微信weui的样式库更新比较频繁，可能将来某一天会失效，所以最好下载到本地使用。
新建navbar.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">
二、 引入jquery库依赖
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
三、navbar html代码
在<body></body>之间添加如下代码
<div class="page navbar js_show"> <div class="page__bd" style="height: 100%;"> <div class="weui-tab"> <div class="weui-navbar"> <div class="weui-navbar__item weui-bar__item_on"> 选项一 </div> <div class="weui-navbar__item"> 选项二 </div> <div class="weui-navbar__item"> 选项三 </div> </div> <div class="weui-tab__panel"> </div> </div> </div> </div>
四、navbar导航效果js实现代码
最好放在</body>后面
<script type="text/javascript" class="navbar js_show">
$(function(){
$('.weui-navbar__item').on('click', function () {
$(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
});
});
</script>五、效果
打开谷歌浏览器，设置手机网页模式浏览案例网页
六、完整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 navbar js_show">
<div class="page__bd" style="height: 100%;">
<div class="weui-tab">
<div class="weui-navbar">
<div class="weui-navbar__item weui-bar__item_on">
选项一
</div>
<div class="weui-navbar__item">
选项二
</div>
<div class="weui-navbar__item">
选项三
</div>
</div>
<div class="weui-tab__panel">
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" class="navbar js_show">
$(function(){
$('.weui-navbar__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/1083.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程