顶部导航php,微信开发实战之顶部导航栏（选项卡）

这篇文章主要为大家详细介绍了微信小程序实战之顶部导航栏的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序顶部导航栏的具体代码，供大家参考，具体内容如下

需求：顶部导航栏

效果图：

{{item}}

tab_01

tab_02

tab_03

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;

}var app = getApp()

Page({

data: {

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

currentTab: 0

},

navbarTap: function(e){

this.setData({

currentTab: e.currentTarget.dataset.idx

})

}

})

运行：

【相关推荐】