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

　　在进行一个小程序开发的时候，要考虑到很多细节的问题，进行微信小程序顶部导航栏的开发需要完整的小程序代码，接下来小编就把全过程的代码带给大家。

　　效果图：

　　wxml：

　　?

　　{{item}}

　　tab_01

　　tab_02

　　tab_03

　　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：

　　?

　　app = getApp()

　　Page({

　　data: {

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

　　currentTab: 0

　　},

　　navbarTap: function(e){

　　this.setData({

　　currentTab: e.currentTarget.dataset.idx

　　})

　　}

　　})

　　以上就是微信小程序顶部导航栏开发所需要的代码了，复制这个代码，按照具体步骤来操作，你就可以进行微信小程序顶部导航栏的开发了，想要获取更多相关资料请关注微信小程序素材网。

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

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

　　微信小程序导航栏，微信小程序导航栏怎么弄?