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

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

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

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">選項(xiàng)一</view>
4. <view class="t_item" hover-class="t_item_hover" bindtap="switch_tab" data-index="1">選項(xiàng)二</view>
5. <view class="t_item" hover-class="t_item_hover" bindtap="switch_tab" data-index="2">選項(xiàng)三</view>
6. </view>
7. <view class="content">
8. <view class="conent_inner_0" hidden="{{hiddenContent_0}}">
9. 選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一 選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一選項(xiàng)一
10. </view>
11. <view class="conent_inner_1" hidden="{{hiddenContent_1}}">
12. 選項(xiàng)二選項(xiàng)二選項(xiàng)二選項(xiàng)二選項(xiàng)二選項(xiàng)二選項(xiàng)二選項(xiàng)二選項(xiàng)二選項(xiàng)二選項(xiàng)二選項(xiàng)二選項(xiàng)二選項(xiàng)二選項(xiàng)二選項(xiàng)二
13. </view>
14. <view class="conent_inner_2" hidden="{{hiddenContent_2}}">
15. 選項(xiàng)三 選項(xiàng)三 選項(xiàng)三 選項(xiàng)三 選項(xiàng)三 選項(xiàng)三 選項(xiàng)三
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. }

效果圖：