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. PHPUnit整合ThinkPHP的库TPUnit

    项目地址:https://github.com/web3d/TPUnit ThinkPHP PHPUnit框架集成,基于TP3.2,建议PHP 5.4以上环境. 单元测试应该是提高PHP编码质量的解决 ...

  2. Java内部类final语义实现

    本文描述在java内部类中,经常会引用外部类的变量信息.但是这些变量信息是如何传递给内部类的,在表面上并没有相应的线索.本文从字节码层描述在内部类中是如何实现这些语义的. 本地临时变量 基本类型 fi ...

  3. opts=opts | |{}

    var opts=opts || {}这个语句是一个赋值或者初始化语句 该语句在opts已经被初始化过后opts的值不变,即执行var opts=opts这一部分. 当opts未被初始化,即typeo ...

  4. 利用H5和ChromiumWebBrowser构建应用

    chromium是google chrome浏览器所采用的内核,最开始由苹果的webkit发展而出,由于webkit在发展上存在分歧,而google希望在开发上有更大的自由度,2013年google决 ...

  5. iOS提交AppStore后申请加急审核

    提交审核后进去下面链接申请加急审核链接:https://developer.apple.com/appstore/contact/appreviewteam/index.html 在I would l ...

  6. iOS面试题 -总结 ，你的基础扎实吗？

    1.#import和#include的区别,@class代表什么? (1)#import指令是Object-C针对#include的改进版本,#import确保引用的文件只会被引用一次,这样你就不会陷 ...

  7. Android中webView和网页的交互

     Android中webView和网页的交互 Android中webView跟网页的交互式通过JavaScript进行的.具体步骤: 1.创建JavaScript,在点击的时候调用JavaScript ...

  8. java 堆栈 理解

    Java 中的堆和栈 堆和栈:分为数据结构的堆和栈以及内存中的堆和栈,两种理解应区分开. 数据结构中的堆: 堆实际上指的就是(满足堆性质的)优先队列的一种数据结构,第1个元素有最高的优先权. 堆性质: ...

  9. 完全删除TFS2013上的项目

    必备条件:您必须是 Team Foundation Server Administrators 组的成员或待删除项目的 Project Administrators 组的成员. 解决方法:打开&quo ...

  10. 阿里技术协会好文推荐：Android绘制流程http://click.aliyun.com/m/8719/

    一.前言 1.1.C++界面库 MFC.WTL.DuiLib.QT.Skia.OpenGL.Android里面的画图分为2D和3D两种: 2D是由Skia 来实现的,3D部分是由OpenGL实现的. ...