微信小程序头部导航栏设置实例

　　微信小程序导航栏的设置包括了微信小程序头部导航栏和底部导航栏，在之前我们已经介绍过底部导航栏的开发设置了，现在我们一起来看看头部导航栏怎么开发。

　　效果图：

　　wxml：

　　[html] view plain copy

　　{{item}}

　　tab_01

　　tab_02

　　tab_03

　　wxss：

　　[css] view plain copypage{

　　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：

　　[javascript] view plain copyvar app = getApp()

　　Page({

　　data: {

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

　　currentTab: 0

　　},

　　navbarTap: function(e){

　　this.setData({

　　currentTab: e.currentTarget.dataset.idx

　　})

　　}

　　})

　　运行：

　　以上就是微信小程序头部导航栏设置的全过程，参照这个教程，只要你细心操作，就可以成功地进行微信小程序头部导航栏的设置了，想要获取更多相关教程请关注微信小程序素材网。

　　微信小程序底部导航栏怎么开发

　　微信小程序导航栏返回样式定制

　　微信小程序能隐藏头部导航栏吗?