分享者：心存善念，來自原文地址 
選項卡是web開發(fā)中經(jīng)常使用到的一個模塊，在小程序中竟然沒有，這里參考別人的文章自己做了一個雙選項卡

實現(xiàn)思路：

通過綁定swichNav事件來控制currentTab(當前選項卡)和isShow(是否顯示)，達到切換展示電影和游戲的目的

代碼：

1.index.wxml

1. <!--index.wxml-->
2. <view class="swiper-tab">
3. <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">電影</view>
4. <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">游戲</view>
5. </view>
6.  
7. <view class="weui-cells__title" hidden="{{!isShow}}">電影列表</view>
8. <view class="weui-cells__title" hidden="{{isShow}}">游戲列表</view>

2.index.wxss

1. .swiper-tab {
2. width: 100%;
3. text-align: center;
4. line-height: 80rpx;
5. background-color:white;
6. }
7.  
8. .swiper-tab-list {
9. font-size: 30rpx;
10. display: inline-block;
11. width: 50%;
12. color: #777;
13. border-bottom: 0rpx;
14. }
15.  
16. .on {
17. color: #da7c0c;
18. border-bottom: 2rpx solid #da7c0c;
19. }
20.  
21. .swiper-box {
22. display: block;
23. height: 100%;
24. width: 100%;
25. overflow: hidden;
26. }
27.  
28. .swiper-box view {
29. text-align: center;
30. }

3.index.js

1. //index.js
2. //獲取應(yīng)用實例
3. var app = getApp()
4. Page( {
5. data: {
6. isShow: true,
7. currentTab: 0,
8. },
9.  
10. swichNav: function (e) {
11. if (this.data.currentTab === e.target.dataset.current) {
12. return false;
13. } else {
14. var showMode = e.target.dataset.current == 0;
15. this.setData({
16. currentTab: e.target.dataset.current,
17. isShow: showMode
18. })
19. }
20. },
21. })

參考文章：http://blog.csdn.net/qq_31383345/article/details/52900835

二：swiper實現(xiàn)塊滑動

分享者：NeverMore_Jugg，來自原文地址