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. ...
随机推荐
- C#开发微信门户及应用(31)--微信语义理解接口的实现和处理
微信语义理解接口提供从用户自然语言输入到结构化解析的技术实现,使用先进的自然语言处理技术给开发者提供一站式的语义解析方案.该平台覆盖多个垂直领域的语义场景,部分领域还可以支持取得最终的展示结果.开发者 ...
- C标准头文件<math.h>
定义域错误可以理解为超出了函数的适用范围,如果发生了定义域错误,设errno为EDOM 如果结果不能表示为double值,则发生值域错误,如果结果上溢,则函数返回HUGE_VAL的值,设errno为E ...
- C#Excel文件加密实现，支持xlsx、docx、pptx（C#\Net\Asp.Net）
从此刻开始,我已封闭!概不接客! 像风一样的男人,像风一样的性格,无拘无束,不拘一格.那么问题来了,当风遇到沙,不一定你是风儿,我是沙儿的缠缠绵绵,.也许是漫天黄沙,飞粒走石.如果我们期望擒住这漫天的 ...
- 关于XHR对象中status范围的记录
if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){ // 成功执行区域 // 2XX表示有效响应 ...
- 浅析CSS中的BFC和IFC
1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...
- sass安装
第一步:下载ruby http://www.ruby-lang.org/zh_cn/downloads/ 第二步:安装ruby http://www.ruby-lang.org/zh_cn/docum ...
- 如何围绕企业战略，建设BI驾驶舱？
随着企业的逐步发展,人员的增加.业态的复杂不仅对管理也对信息化的要求越来越高,甚至需要从战略角度出发,进行从上至下的全面推行. 关于这个话题,某公司深有体会.面对这样的瓶颈,一方面从优化信息架构.调整 ...
- 关于从Activity A跳转到Activity B ，其中Activity A中有一个VideoView，Activity B中有一个MediaPlayer。
两个不同的视频的跳转, 前面我是在onStop()方法中销毁VideoView(因为MediaPlayer是全局共用的,而VideoView内包含MediaPlayer),但是每次进入Activity ...
- 在 CentOS7 上安装 zookeeper-3.4.9 服务
在 CentOS7 上安装 zookeeper-3.4.9 服务 1.创建 /usr/local/services/zookeeper 文件夹: mkdir -p /usr/local/service ...
- Java实现单链表的各种操作
Java实现单链表的各种操作 主要内容:1.单链表的基本操作 2.删除重复数据 3.找到倒数第k个元素 4.实现链表的反转 5.从尾到头输出链表 6.找到中间节点 7.检测链表是否有环 8.在 ...