精简：小程序实现选项卡效果的方法之一

今天早上有人在群里问选项卡这样的东西怎么实现，很多人给的方案是通过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. }

效果图：