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. RabbitMQ Config

    默认访问地址:http://localhost:15672/ 要想修改内网访问: %APPDATA%\RabbitMQ\ 目录下添加文件 rabbitmq.config [ {rabbit, [%% ...

  2. Oracle同义词

    Oracle的同义词(synonyms)从字面上理解就是别名的意思,和试图的功能类似,就是一种映射关系.本文介绍如何创建同义词语句,删除同义词以及查看同义词语句. Oracle的同义词总结:从字面上理 ...

  3. JAVA调用R

    JAVA很适合开发应用系统,但是数学建模和计算能力非其所长,如果该系统需要进行大量的统计或者优化的计算,调用R是一种很好的方式.JAVA负责系统的构建,R用来做运算引擎,从而实现应用型和分析性相结合的 ...

  4. input文本框录入字母自动大写

    向文本框输入文字时,如何让小写字母自动变为大写呢?有一个简单有效的做法是用CSS. <input name="t1" type="text" style= ...

  5. JavaScript Array数组方法详解

    Array类型是ECMAScript中最常用的引用类型.ECMAScript中的数据与其它大多数语言中的数组有着相当大的区别.虽然ECMAScript中的数据与其它语言中的数组一样都是数据的有序列表, ...

  6. CALayer的transform属性

    先来与View比较一下 View:transform -> CGAffineTransformRotate... layer:transform -> CATransform3DRotat ...

  7. ContentProvider中央档案馆,以及获取联系人电话的示例

    Android官方文档介绍的数据存储方式共有五种,sqlite,SharedPreferences,网络存储,外储存储,文件存储,但是这些数据都无法进行共享,那么我们就引入了今天的主角:Content ...

  8. 自动化集成部署udeployer 批量统一安装一键部署

    通过jenkins构建项目:version版本控制:udployer自动化集成:ucop业务巡检做到高效高可用的自动化体系.   1.0版本: 逻辑与业务分离,完美实现逻辑与业务分离,业务实现统一sh ...

  9. 强大的flash头像上传插件(支持旋转、拖拽、剪裁、生成缩略图等)

    今天介绍的这款flash上传头像功能非常强大,支持php,asp,jsp,asp.net 调用 头像剪裁,预览组件插件. 本组件需要安装Flash Player后才可使用,请从http://dl.pc ...

  10. iOS系列 基础篇 05 视图鼻祖 - UIView

    iOS系列 基础篇 05 视图鼻祖 - UIView 目录: UIView“家族” 应用界面的构建层次 视图分类 最后 在Cocoa和Cocoa Touch框架中,“根”类时NSObject类.同样, ...