微信小程序开发之选项卡(窗口顶部TabBar)页面切换

微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了.

总算做出来了.分享出来看看.

先看效果:

再上代码:

1.index.wxml

[html]  view plain  copy

 

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

2.index.wxss

[css]  view plain  copy

 

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.   
15. .swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }  
16. .swiper-box view{  
17.     text-align: center;  
18. }  

3.index.js

[javascript]  view plain  copy

 

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.      */  
20.     wx.getSystemInfo( {  
21.   
22.       success: function( res ) {  
23.         that.setData( {  
24.           winWidth: res.windowWidth,  
25.           winHeight: res.windowHeight  
26.         });  
27.       }  
28.   
29.     });  
30.   },  
31.   /** 
32.      * 滑动切换tab 
33.      */  
34.   bindChange: function( e ) {  
35.   
36.     var that = this;  
37.     that.setData( { currentTab: e.detail.current });  
38.   
39.   },  
40.   /** 
41.    * 点击tab切换 
42.    */  
43.   swichNav: function( e ) {  
44.   
45.     var that = this;  
46.   
47.     if( this.data.currentTab === e.target.dataset.current ) {  
48.       return false;  
49.     } else {  
50.       that.setData( {  
51.         currentTab: e.target.dataset.current  
52.       })  
53.     }  
54.   }  
55. })  

之前没有上传代码.这是下图的代码

demo下载地址

这样一个类似viewpage的顶部选项卡就出来了.

底部选项卡TabBar