微信小程序顶部选项卡怎么开发

　　小程序选项卡开发有很多种类型，与之对应的选项卡效果也就不一样了。今天小编要为大家介绍的是微信小程序顶部选项卡的开发步骤和相应的小程序码。

　　需求：头部导航栏

　　效果图：

　　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

　　})

　　}

　　})

　　运行：

　　以上就是微信小程序顶部选项卡实现的效果图了，有了上面这份资料，你想要进行相关的开发应该也很容易会成功，更多相关资料请关注微信小程序素材网。

　　微信小程序滑动选项卡开发源码

　　小程序滚动选项卡怎么开发?

　　微信小程序底部选项卡开发实例