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:;

    -webkit-flex:;

    flex:;

    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:;

    top:;

    width: 1px;

    bottom:;

    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:;

    right:;

    bottom:;

    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:;

    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:;

    font-size:;

    margin:;

    padding:;

    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 实例完成！直接拿走！

weui tabbar 切换的更多相关文章

  1. 【iOS】彩色TabBar切换动画实现

    无意间看到一个彩色TabBar切换的设计图,感觉很不错,有空就把他实现了. 环境信息 Mac OS X 10.10.4 Xcode 6.4 iOS 8.4 效果图: 效果图 源码下载地址: https ...

  2. vue,一路走来（17）--底部tabbar切换

    <router-link></router-link>存在router-link-active属性,那么底部tabbar切换就简单多了.不会再出现刷新回到第一个的bug. &l ...

  3. uni-app 顶部tabbar切换

    完成样式 项目地址:https://gitee.com/jielov/uni-app-tabbar 顶部tabbar代码 <!--顶部导航栏--> <view class=" ...

  4. app整体搭建环境：tabBar切换不同控制器的封装（自定义导航+自定义uiviewcontroler+系统自带tabbar+自定义tabbarController）

    首先,一个app的搭建环境非常重要.既要实现基本功能,又要考虑后期优化的性能. 现在很多应用不仅仅是系统自带的控制器,由于需求复杂,基本上需要自定义多控制器来管理. 新建一个BasicNavigati ...

  5. mint ui的tabBar监听路由变化实现tabBar切换

    说明 最近学习vue,使用了mint ui的tabBar,感觉好难受,结合 tab-container使用更难受,因为它不是根据路由来切换页面的.mui与它基本相反,因此它能根据搜索栏的路由变化,相应 ...

  6. 微信小程序关于tabbar点击切换数据不刷新问题

    微信小程序中经常遇到的需求就是我提交了一个表单或者进行了一个操作,需要在我的个人中心页面中实时显示出来,但是小程序中的tabbar切换类似于tab切换 并不会进行页面刷新请求 所以总是会造成一些数据更 ...

  7. 微信小程序实战（一）之仿美丽说

    被美丽说少女粉吸引,就想着自己也写一个来练练手,正好最近在学习微信小程序.接下来让我们分享一下我的学习历程吧! 选题 其实纠结了好久该仿什么,看到别人都写的差不多了,自己却还没有动手,很着急,那两天一 ...

  8. 基于git的博客(含站点与小程序)

    1 效果 静态站点: blog.makergyt.com 备用链接: github.blog.makergyt.com 小程序: 语雀:<MakerGYT blog> 2 需求分析 2.1 ...

  9. ios项目里扒出来的json文件

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Menlo; color: #000000 } p.p2 { margin: 0.0px 0. ...

随机推荐

  1. svn+teamcity+YouTrack+Upsource搭建—写给明天工作室的小伙伴

    首先解释下概念: SVN:Subversion的简称,版本控制系统.采用集中式管理(本地只保留服务器仓储的副本,想要把代码交到服务器或者看提交记录.差异对比就必须得有网络连接) Teamcity:可持 ...

  2. WPF多源绑定

    将控件绑定到多个数据源,ListBox绑定到一个集合,其中每一项绑定到集合中对象的两个属性,并对绑定进行了格式化. <ListBox ItemsSource="{StaticResou ...

  3. linux grep命令

    linux grep命令1.作用Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expressio ...

  4. java web之个人通讯录系统

    前天下了第一场雪,专业课老师给我们布置了一个期末小作业,真的感觉到寒假就要来临了.这个学期没过多久就要结束了.总结这学期,感觉还是有不少收获的.完成了当初许下的诺言,现在也越来越喜欢软件这个行业了,虽 ...

  5. MAC的SVN怎么设置允许.a文件上传

    首先在mac中svn的安装会去选择Cornerstone 如果遇到这个问题肯定是已经安装并准备上传.a 文件了.首先要清楚svn是默认过滤忽略.a文件的上传的,要想可以上传.a 可以通过这个简单的方法 ...

  6. Android XML中引用自定义内部类view的四个why

    今天碰到了在XML中应用以内部类形式定义的自定义view,结果遇到了一些坑.虽然通过看了一些前辈写的文章解决了这个问题,但是我看到的几篇都没有完整说清楚why,于是决定做这个总结. 使用自定义内部类v ...

  7. 旅游公司招聘Java工程师

    公司招聘:岗位要求如下 Java开发工程师工作内容1.根据需求完成软件系统代码的开发,测试以及文档撰写工作:2.分析并解决客户的问题:3.配合业务部门进行数据分析以及系统优化 岗位要求:1.本科以上学 ...

  8. [Modern OpenGL系列（四）]在OpenGL中使用Shader

    本文已同步发表在CSDN:http://blog.csdn.net/wenxin2011/article/details/51347440 在上一篇文章中已经介绍了OpenGL窗口的创建.本文接着说如 ...

  9. jqgrid+bootstrap样式实践

    jqgrid+bootstrap样式实践,报错数据加载,选中,删除等功能 需要引入的样式 bootstrap.min.css ui.jqgrid.css 需要引入的JS jquery.min.js b ...

  10. SqlServer表结构查询

    一.前言 近两天项目升级数据迁移,将老版本(sqlserver)的数据迁移到新版本(mysql)数据库,需要整理一个Excel表格出来,映射两个库之间的表格字段,示例如下: Mysql数据库查询表结构 ...