小程序 顶部选项卡 顶部导航

html

< view class= "navbar">

< text wx:for= "{{navbar}}" data-idx= "{{index}}" class= "item {{currentTab==index ? 'active' : ''}}" wx:key= "unique" bindtap= "navbarTap">{{item}} text >

view >

< view hidden= "{{currentTab!==0}}">

首页

view >

< view hidden= "{{currentTab!==1}}">

信息

view >

css

page{

display: flex;

flex-direction: column;

height: 100%;

}

.navbar{

flex: none;

display: flex;

background: rgba( 0, 0, 0, 0.009 );

}

.navbar .item{

position: relative;

flex: auto;

text-align: center;

line-height: 80 rpx;

}

.navbar .item.active{

color: #FFCC00;

}

.navbar .item.active:after{

content: "";

display: block;

position: absolute;

bottom: 0;

left: 0;

right: 0;

height: 4 rpx;

background: #FFCC00;

}

js

data: {

navbar: [ '首页', '信息'],

currentTab: 0

},

navbarTap: function (e) {

this.setData({

currentTab: e.currentTarget.dataset.idx

})

},