weui tabbar 切换

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 切换的更多相关文章

【iOS】彩色TabBar切换动画实现
无意间看到一个彩色TabBar切换的设计图,感觉很不错,有空就把他实现了. 环境信息 Mac OS X 10.10.4 Xcode 6.4 iOS 8.4 效果图: 效果图源码下载地址: https ...
vue,一路走来（17）--底部tabbar切换
<router-link></router-link>存在router-link-active属性,那么底部tabbar切换就简单多了.不会再出现刷新回到第一个的bug. &l ...
uni-app 顶部tabbar切换
完成样式项目地址:https://gitee.com/jielov/uni-app-tabbar 顶部tabbar代码  <view class=" ...
app整体搭建环境：tabBar切换不同控制器的封装（自定义导航+自定义uiviewcontroler+系统自带tabbar+自定义tabbarController）
首先,一个app的搭建环境非常重要.既要实现基本功能,又要考虑后期优化的性能. 现在很多应用不仅仅是系统自带的控制器,由于需求复杂,基本上需要自定义多控制器来管理. 新建一个BasicNavigati ...
mint ui的tabBar监听路由变化实现tabBar切换
说明最近学习vue,使用了mint ui的tabBar,感觉好难受,结合 tab-container使用更难受,因为它不是根据路由来切换页面的.mui与它基本相反,因此它能根据搜索栏的路由变化,相应 ...
微信小程序关于tabbar点击切换数据不刷新问题
微信小程序中经常遇到的需求就是我提交了一个表单或者进行了一个操作,需要在我的个人中心页面中实时显示出来,但是小程序中的tabbar切换类似于tab切换并不会进行页面刷新请求所以总是会造成一些数据更 ...
微信小程序实战（一）之仿美丽说
被美丽说少女粉吸引,就想着自己也写一个来练练手,正好最近在学习微信小程序.接下来让我们分享一下我的学习历程吧! 选题其实纠结了好久该仿什么,看到别人都写的差不多了,自己却还没有动手,很着急,那两天一 ...
基于git的博客(含站点与小程序)
1 效果静态站点: blog.makergyt.com 备用链接: github.blog.makergyt.com 小程序: 语雀:<MakerGYT blog> 2 需求分析 2.1 ...
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. ...

随机推荐

再谈JavaScript闭包及应用
.title-bar { width: 80%; height: 35px; padding-left: 35px; color: white; line-height: 35px; font-siz ...
C#开发微信门户及应用(16)-微信企业号的配置和使用
在本系列随笔的前面,主要就是介绍微信公众号的门户应用开发,最近把整个微信框架进行了扩展补充,增加了最新的企业号的API封装和开发,后续主要介绍如何利用C#进行微信企业号的开发工作,本篇作为微信企业号的 ...
Objective-c粒子动画
前面贴过几篇关于SpriteKit的案例文章,其中涉及到的动画都是材质类的图片切换或则常规的动画效果,没涉及到今天要说的粒子动画,今天说的粒子动画就是在游戏中实现更佳炫酷的效果必须使用的类,OC中粒子 ...
Java全角、半角字符的关系以及转换
如果搞明白了Java中全角字符和半角字符之间的关系,那他们之间的转换就不是个麻烦事儿.你只需要对这个关系有那么一个印象就足够了. 全角字符与半角字符的关系通过下面的代码能看到Java中所有字符以及对 ...
nginx+lua
一场电闪与雷鸣的结合, 公司原有服务器已经配置好nginx,需要重新装载lua模块,哈哈哈,无法无法. 安装LUA模块需要以下 pcre ftp://ftp.csx.cam.ac.uk ...
Tomcat数据源（DataSource）简介
JDBC2.0提供了javax.sql.DataSource接口,它负责建立与数据库的连接,在应用程序中访问数据库时不必编写连接数据库的代码,可以直接从数据源获得数据库连接 1.数据库和连接池在Da ...
如何用Web技术开发Windows Form应用
现在H5很热,很多互联网公司的产品都采用混合编程,其中各个平台客户端的“壳”为原生控件,但是内容很多都是Web网页,因此可以做出很多炫酷的效果.随着Node.js和Ionic等框架的出现,现在感觉Ja ...
AlloyTouch 0.2.0发布--鱼和熊掌兼得
原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-0.2.0 背景公司师姐昨日在KM发了篇长文,主要结论RAF+transfo ...
ContentProvider中央档案馆,以及获取联系人电话的示例
Android官方文档介绍的数据存储方式共有五种,sqlite,SharedPreferences,网络存储,外储存储,文件存储,但是这些数据都无法进行共享,那么我们就引入了今天的主角:Content ...
Bundle包的制作与使用
一.清爽Bundle模式(在应用工程中创建Bundle的子文件夹,而非在Bundle项目中): 1.新建Bundle包 2.生成Bundle包,并拖入项目中,然后"右键显示包内容" ...

weui tabbar 切换

weui tabbar 切换的更多相关文章

随机推荐

热门专题