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

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

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

先看效果:

再上代码:

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 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

 

 

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

 

 

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

 

我的博客,欢迎批评!