今天早上有人在群里問選項卡這樣的東西怎么實現，很多人給的方案是通過nav去實現，其實我以前不懂這個怎么做的時候也用過nav，現在想起來實在太蠢了。選項卡是web應用中常用的一個組件目前的jquery-ui,bootstrap等主流前端框架都實現了這樣的效果。就是通過點擊一個按鈕顯示對應的內容，其他的內容全部隱藏起來。

使用技術點： 
1、使用hidden屬性去控制元素的顯示隱藏（不止這樣一種）。 
2、通過點擊按鈕上設置一個data-index來獲取點擊按鈕的索引（不止這樣一種）。 
3、使用setData來修改數據，刷新視圖。

代碼直接貼出來吧，樣子比較丑自己修飾。

table.js

1. var app = getApp()
2. Page({
3. data: {
4. hiddenContent_0: false,
5. hiddenContent_1: true,
6. hiddenContent_2: true
7. },
8.  
9. switch_tab: function (e) {
10. var index = e.currentTarget.dataset.index,
11. hiddenContent_0 = true,
12. hiddenContent_1 = true,
13. hiddenContent_2 = true;
14. switch (index) {
15. case '0':
16. hiddenContent_0 = false;
17. break;
18.  
19. case '1':
20. hiddenContent_1 = false;
21. break;
22.  
23. case '2':
24. hiddenContent_2 = false;
25. break;
26. }
27.  
28. this.setData({
29. hiddenContent_0: hiddenContent_0,
30. hiddenContent_1: hiddenContent_1,
31. hiddenContent_2: hiddenContent_2
32. })
33. }
34. })

table.wxml

1. <view class="contianer">
2. <view class="tab">
3. <view class="t_item" hover-class="t_item_hover" bindtap="switch_tab" data-index="0">選項一</view>
4. <view class="t_item" hover-class="t_item_hover" bindtap="switch_tab" data-index="1">選項二</view>
5. <view class="t_item" hover-class="t_item_hover" bindtap="switch_tab" data-index="2">選項三</view>
6. </view>
7. <view class="content">
8. <view class="conent_inner_0" hidden="{{hiddenContent_0}}">
9. 選項一選項一選項一選項一選項一選項一選項一選項一選項一選項一選項一選項一選項一選項一選項一選項一選項一選項一選項一 選項一選項一選項一選項一選項一選項一選項一選項一選項一選項一選項一選項一選項一選項一選項一選項一選項一選項一選項一選項一選項一選項一選項一
10. </view>
11. <view class="conent_inner_1" hidden="{{hiddenContent_1}}">
12. 選項二選項二選項二選項二選項二選項二選項二選項二選項二選項二選項二選項二選項二選項二選項二選項二
13. </view>
14. <view class="conent_inner_2" hidden="{{hiddenContent_2}}">
15. 選項三 選項三 選項三 選項三 選項三 選項三 選項三
16. </view>
17. </view>
18. </view>

table.wxss

1.  
2. .tab {
3. overflow: hidden;
4. }
5.  
6. .t_item {
7. float: left;
8. width: 33.33%;
9. line-height: 34px;
10. border-bottom: 1px solid #999;
11. border-top: 1px solid #999;
12. text-align: center;
13. margin-left: -1px;
14. }
15.  
16. .t_item_hover {
17. background: #ddd;
18. }
19.  
20. .t_item + .t_item {
21. border-left: 1px solid #999;
22. }
23.  
24. .content {
25. border-bottom: 1px solid #999;
26. }
27.  
28. .conent_inner_0, .conent_inner_1, .conent_inner_2 {
29. padding: 10px;
30. background: #ddd;
31. }

效果圖：