tab weui 页面切换_weui tabbar 切换

Html:

.weui_navbar_item.weui_bar_item_on {

color: #2196F3;

cursor: pointer;

}

患者我的

问医生

我的

问医生内容.......

我的........

jiaj.css

/*tab 切换*/

.weui_navbar_item{

position: relative;

display: block;

-webkit-box-flex: 1;

-webkit-flex: 1;

flex: 1;

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: 0;

top: 0;

width: 1px;

bottom: 0;

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: 0;

right: 0;

bottom: 0;

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: 400;

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: 0;

font-size: 0;

margin: 0;

padding: 0;

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 实例完成！直接拿走！

来源：https://www.cnblogs.com/baiyygynui/p/6227031.html