php顶部导航条代码,小程序中顶部导航栏示例代码

微信小程序 开发之顶部导航栏

需求：顶部导航栏

wxml：<!--导航条-->

<view class="navbar">

<text wx:for="pw_navbar" data-idx="pw_index" class="item pw_currentTab==index ? 'active' : ''" wx:key="unique" bindtap="navbarTap">pw_item</text>

</view>

<!--首页-->

<view hidden="pw_currentTab!==0">

tab_01

</view>

<!--搜索-->

<view hidden="pw_currentTab!==1">

tab_02

</view>

<!--我-->

<view hidden="pw_currentTab!==2">

tab_03

</view>

wxss：page{

display: flex;

flex-direction: column;

height: 100%;

}

.navbar{

flex: none;

display: flex;

background: #fff;

}

.navbar .item{

position: relative;

flex: auto;

text-align: center;

line-height: 80rpx;

}

.navbar .item.active{

color: #FFCC00;

}

.navbar .item.active:after{

content: "";

display: block;

position: absolute;

bottom: 0;

left: 0;

right: 0;

height: 4rpx;

background: #FFCC00;

}

js：var app = getApp()

Page({

data: {

navbar: ['首页', '搜索', '我'],

currentTab: 0

},

navbarTap: function(e){

this.setData({

currentTab: e.currentTarget.dataset.idx

})

}

})