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. ...
随机推荐
- Gradle project sync failed
在Android Studio中运行APP时出现了以下错误: gradle project sync failed. please fix your project and try again 解决的 ...
- QML 从无到有 （基础）
小公司,没办法,什么都得自己亲自来. 服务端是MVC,现在需要可PC客户端和移动APP. 考虑到网页应用有很多界面框架,可以做出很漂亮的界面来,就尝试着使用nwjs来实现,可是在使用了2天的nwjs后 ...
- Java泛型
什么是泛型? 泛型(Generic type 或者 generics)是对 Java 语言的类型系统的一种扩展,以支持创建可以按类型进行参数化的类.可以把类型参数看作是使用参数化类型时指定的类型的一个 ...
- 隔天开启tomcat spring报错
严重: Error configuring application listener of class org.springframework.web.context.ContextLoaderLis ...
- ASP.NET MVC搭建项目后台UI框架—11、自动加载下拉框查询
ASP.NET MVC搭建项目后台UI框架—1.后台主框架 需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入2个字就过滤以这两个子开头的记录,依次类推. 突然要用到这 ...
- (转)ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 的解决方法
早上同事用PL/SQL连接虚拟机中的Oracle数据库,发现又报了"ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务"错误,帮其解决后,发现很多人遇到过这样的问 ...
- 20个不可思议的 WebGL 示例和演示
WebGL 是一项在网页浏览器呈现3D画面的技术,有别于过去需要安装浏览器插件,通过 WebGL 的技术,只需要编写网页代码即可实现3D图像的展示.WebGL 可以为 Canvas 提供硬件3D加速渲 ...
- gulp-uglify 与gulp.watch()配合使用时遇到的重复压缩问题
今天学习gulp时候,用到gulp-uglify压缩js模块,遇到的一个问题-当用gulp.watch来监听js文件的变动时出现重复压缩的问题 目录结构如下: gulpfile.js代码如下: var ...
- Java实现约瑟夫环
什么是约瑟夫环呢? 约瑟夫环是一个数学的应用问题:已知n个人(以编号1,2,3...n分别表示)围坐在一张圆桌周围.从编号为k的人开始报数,数到m的那个人出列;他的下一个人又从1开始报数,数到m的那个 ...
- VBA 格式化字符串 - Format大全
VBA 格式化字符串 VBA 的 Format 函数与工作表函数 TEXT 用法基本相同,但功能更加强大,许多格式只能用于VBA 的 Format 函数,而不能用于工作表函数 TEXT ,以下是本人归 ...