Html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" /> <!--医首信息自定义css--> <link rel="stylesheet" type="text/css" href="../css/jiaj.css" /> <!--官网demo css--> <link rel="stylesheet" type="text/css" href="../css/example.css" /> <!--weui css--> <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.0/style/weui.min.css" /> <!--jQuery weui--> <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/0.8.0/css/jquery-weui.min.css"> <!--切换样式--> <style type="text/css"> .weui_navbar_item.weui_bar_item_on { color: #2196F3; cursor: pointer; } </style> <title>患者我的</title> </head> <body ontouchstart> <!--页面切换必须要添加js_container--> <div class="container js_container"> <div class="page"> <div class="weui_tab"> <!--底部菜单--> <div class="weui-tabbar"> <a href="#tab1" class="weui_navbar_item weui_bar_item_on"> 问医生 </a> <a href="#tab2" class="weui_navbar_item"> 我的 </a> </div> <!--菜单对应panel--> <div class="weui_tab_bd"> <!--tab1 医生管理面板--> <div id="tab1" class="weui_tab_bd_item weui_tab_bd_item_active"> 问医生内容....... </div> <!--tab2 我的面板--> <div id="tab2" class="weui_tab_bd_item"> 我的........ </div> </div> </div> </div> </div> <!--页面切换--> <script src="https://res.wx.qq.com/open/libs/zepto/1.1.6/zepto.js"></script> <script src="https://cdn.bootcss.com/jquery-weui/0.8.2/js/jquery-weui.min.js"></script> </body> </html>
jiaj.css
/*tab 切换*/ .weui_navbar_item{ position: relative; display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; padding: 6px; text-align: center; font-size: 15px; /* align-items: center; */ line-height: 35px; -webkit-tap-highlight-color: rgba(0,0,0,0); } .weui_navbar_item::after{ content: ""; position: absolute; right: 0; top: 0; width: 1px; bottom: 0; border-right: 1px solid #CCCCCC; -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: scaleX(.5); transform: scaleX(.5); } .weui_navbar_item .weui_bar_item_on { color: #2196F3; transition: all 0.5s ease-in; }
example.css
.container, .page { position: absolute; top: 0; right: 0; bottom: 0; left: 0 } .global_navs .cell:before, .global_navs:after, .global_navs:before { border-color: #D9DBDA } body, html { height: 100%; -webkit-tap-highlight-color: transparent } .page, body { background-color: #FBF9FE } .container { overflow: hidden } .page { overflow-y: auto; -webkit-overflow-scrolling: touch } .hd { padding: 2em 0 } .page_desc { text-align: center; color: #888; font-size: 14px } .bd.spacing { padding: 0 15px } .page_title { text-align: center; font-size: 34px; color: #3CC51F; font-weight: 400; margin: 0 15% } .page.button .page_title, .page.cell .page_title { color: #225FBA } .global_navs { background-color: transparent } .page.article, .page.dialog, .page.icons, .page.msg, .page.toast { background-color: #FFF } .global_navs .cell { padding-top: .5em; padding-bottom: .5em } .global_navs .icon_nav { width: 28px; height: 28px; display: block; margin-right: .7em } .page.button .bd { padding: 0 15px } .page.button .button_sp_area { padding: 10px 0; width: 60%; margin: 0 auto; text-align: justify; text-justify: distribute-all-lines; font-size: 0 } .page.button .button_sp_area:after { display: inline-block; width: 100%; height: 0; font-size: 0; margin: 0; padding: 0; overflow: hidden; content: "." } .page.cell .bd { padding-bottom: 30px } .page.dialog .bd, .page.toast .bd { padding: 120px 15px 0 } .page.msg .weui_msg { padding-top: 30px } .page.article .page_title { color: #DE7C23 } .page.icons { text-align: center } .page.icons .page_title { color: #3E24BD } .page.icons .bd { padding: 30px 0; text-align: center } .page.icons .icon_sp_area { padding: 10px 20px; text-align: left } .page.icons i { margin: 0 5px 10px } @-webkit-keyframes slideIn { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes slideIn { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-webkit-keyframes slideOut { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } to { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } } @keyframes slideOut { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } to { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } } .page.slideIn { -webkit-animation: slideIn .2s forwards; animation: slideIn .2s forwards } .page.slideOut { -webkit-animation: slideOut .2s forwards; animation: slideOut .2s forwards }
OK!tabbar 实例完成！直接拿走！