微信小程式開發中選項卡.在android中選項卡一般用fragment,到了小程式這裡瞬間懵逼了.

總算做出來了.分享出來看看.

先看效果:

再上程式碼:

1.index.wxml

1. <!--index.wxml-->
2. <viewclass="swiper-tab">
3.     <viewclass="swiper-tab-list {{currentTab==0 ? 'on' : ''}}"data-current="0"bindtap="swichNav">哈哈</view>
4.     <viewclass="swiper-tab-list {{currentTab==1 ? 'on' : ''}}"
   data-current="1"bindtap="swichNav">呵呵</view>
5.     <viewclass="swiper-tab-list {{currentTab==2 ? 'on' : ''}}"data-current="2"bindtap="swichNav">嘿嘿</view>
6. </view>
7. <swipercurrent="{{currentTab}}"class="swiper-box"duration="300"style="height:{{winHeight - 31}}px"bindchange="bindChange"
   >
8.     <!-- 我是哈哈 -->
9.     <swiper-item>
10.       <view>我是哈哈</view>
11.     </swiper-item>
12.     <!-- 我是呵呵 -->
13.     <swiper-item>
14.       <view>我是呵呵</view>
15.     </swiper-item>
16.     <!-- 我是嘿嘿 -->
17.     <swiper-item>
18.       <view>我是嘿嘿</view>
19.     </swiper-item>
20. </swiper>

1. /**index.wxss**/
2. .swiper-tab{  
3.     width: 100%;  
4.     border-bottom: 2rpx solid#777777;  
5.     text-align: center;  
6.     line-height: 80rpx;}  
7. .swiper-tab-list{  font-size: 30rpx;  
8.     display: inline-block;  
9.     width: 33.33%;  
10.     color: #777777;  
11. }  
12. .on{ color: #da7c0c;  
13.     border-bottom: 5rpx solid#da7c0c;}  
14. .swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }  
15. .swiper-box view{  
16.     text-align: center;  
17. }  

1. //index.js
2. //獲取應用例項
3. var app = getApp()  
4. Page( {  
5.   data: {  
6.     /** 
7.         * 頁面配置 
8.         */
9.     winWidth: 0,  
10.     winHeight: 0,  
11.     // tab切換
12.     currentTab: 0,  
13.   },  
14.   onLoad: function() {  
15.     var that = this;  
16.     /** 
17.      * 獲取系統資訊 
18.      */
19.     wx.getSystemInfo( {  
20.       success: function( res ) {  
21.         that.setData( {  
22.           winWidth: res.windowWidth,  
23.           winHeight: res.windowHeight  
24.         });  
25.       }  
26.     });  
27.   },  
28.   /** 
29.      * 滑動切換tab 
30.      */
31.   bindChange: function( e ) {  
32.     var that = this;  
33.     that.setData( { currentTab: e.detail.current });  
34.   },  
35.   /** 
36.    * 點選tab切換 
37.    */
38.   swichNav: function( e ) {  
39.     var that = this;  
40.     if( this.data.currentTab === e.target.dataset.current ) {  
41.       returnfalse;  
42.     } else {  
43.       that.setData( {  
44.         currentTab: e.target.dataset.current  
45.       })  
46.     }  
47.   }  
48. })  

之前沒有上傳程式碼.這是下圖的程式碼