微信小程序之顶部导航栏

需求：顶部导航栏 
效果图： 

wxml：

1. <!--导航条-->
2. <view class="navbar">
3. <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text>
4. </view>
5.  
6. <!--首页-->
7. <view hidden="{{currentTab!==0}}">
8. tab_01
9. </view>
10.  
11. <!--搜索-->
12. <view hidden="{{currentTab!==1}}">
13. tab_02
14. </view>
15.  
16. <!--我-->
17. <view hidden="{{currentTab!==2}}">
18. tab_03
19. </view>

wxss：

1. page{
2. display: flex;
3. flex-direction: column;
4. height: 100%;
5. }
6. .navbar{
7. flex: none;
8. display: flex;
9. background: #fff;
10. }
11. .navbar .item{
12. position: relative;
13. flex: auto;
14. text-align: center;
15. line-height: 80rpx;
16. }
17. .navbar .item.active{
18. color: #FFCC00;
19. }
20. .navbar .item.active:after{
21. content: "";
22. display: block;
23. position: absolute;
24. bottom: 0;
25. left: 0;
26. right: 0;
27. height: 4rpx;
28. background: #FFCC00;
29. }

js：

1. var app = getApp()
2. Page({
3. data: {
4. navbar: ['首页', '搜索', '我'],
5. currentTab: 0
6. },
7. navbarTap: function(e){
8. this.setData({
9. currentTab: e.currentTarget.dataset.idx
10. })
11. }
12. })

运行：