需求：顶部导航栏

效果图：

wxml：
[html] view plain copy print?
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：
[css] view plain copy print?
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：
[javascript] view plain copy print?
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. })

运行：

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道！