微信小程序开发之选项卡(窗口顶部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. })  

本文转自 IT阿飞 51CTO博客，原文链接:http://blog.51cto.com/itafei/1950128