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. Button 模板和样式

    <Style TargetType="{x:Type Button}"> <Setter Property="FontFamily" Valu ...

  2. Asp.NET MVC 使用 SignalR 实现推送功能二（Hubs 在线聊天室 获取保存用户信息）

    简单介绍 关于SignalR的简单实用 请参考 Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室) 在上一篇中,我们只是介绍了简单的消息推送,今天我们来修改一下,实现 ...

  3. JavaWeb_day06_Filter过滤器

    本文为博主辛苦总结,希望自己以后返回来看的时候理解更深刻,也希望可以起到帮助初学者的作用. 转载请注明 出自 : luogg的博客园 谢谢配合! day06 request 对象常用方法 respon ...

  4. Java 单例模式详解

    概念: java中单例模式是一种常见的设计模式,单例模式分三种:懒汉式单例.饿汉式单例.登记式单例三种. 单例模式有一下特点: 1.单例类只能有一个实例. 2.单例类必须自己自己创建自己的唯一实例. ...

  5. DS 工作室

    如果你想租用我,QQ:26959368 价格可以详细谈哦, 1. 企业信息化过程中问题的免费咨询: 2. Office 365.Sharepoint Online .Azure 云的咨询服务. 3. ...

  6. ListView之点击展开菜单

    一.概述 ListView点击item显示菜单是要实现这样的效果: 需要实现的逻辑如下: 1)点击一个普通item,展开当前菜单,同时关闭其他菜单 2)点击一个已展开的菜单,隐藏当前菜单 3)将展开菜 ...

  7. 【代码笔记】iOS-中国地图

    一,效果图. 二,工程图. 三,代码. AppDelegate.m #import "AppDelegate.h" //加入头文件 #import "DrawMapVie ...

  8. UML类图关系全面剖析

    UML的类图关系分为: 关联.聚合/组合.依赖.泛化(继承).而其中关联又分为双向关联.单向关联.自身关联:下面就让我们一起来看看这些关系究竟是什么,以及它们的区别在哪里. 1.关联 双向关联:C1- ...

  9. Python学习笔记8-单元测试（1）

    源代码: roman_mumeral_map = (('M',1000), ('CM',900), ('D',500), ('CD',400), ('C',100), ('XC',90), ('L', ...

  10. 项目自动化建构工具gradle 入门3——生一个exe的helloWorld

    前两次呢,我们能够用一个外部的jar 来实现输出helloWorld.但问题是我每次都要用java -jar 来执行,这样我们自己玩还可以,让用户玩就不好了.所以我们生成一个exe给他们吧.这次我们仍 ...