微信小程序 选项卡demo

———-demo.wxss————

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

———-demo.wxml————

1. <view class="swiper-tab">
2. <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">哈哈</view>
3. <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">呵呵</view>
4. <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">嘿嘿</view>
5. </view>
6.  
7. <swiper current="{{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>

———-demo.js————

1. Page( {
2. data: {
3. /**
4. * 页面配置
5. */
6. winWidth: 0,
7. winHeight: 0,
8. // tab切换
9. currentTab: 0,
10. },
11. onLoad: function() {
12. var that = this;
13.  
14. /**
15. * 获取系统信息
16. */
17. wx.getSystemInfo( {
18.  
19. success: function( res ) {
20. that.setData( {
21. winWidth: res.windowWidth,
22. winHeight: res.windowHeight
23. });
24. }
25.  
26. });
27. },
28. /**
29. * 滑动切换tab
30. */
31. bindChange: function( e ) {
32.  
33. var that = this;
34. that.setData( { currentTab: e.detail.current });
35.  
36. },
37. /**
38. * 点击tab切换
39. */
40. swichNav: function( e ) {
41.  
42. var that = this;
43.  
44. if( this.data.currentTab === e.target.dataset.current ) {
45. return false;
46. } else {
47. that.setData( {
48. currentTab: e.target.dataset.current
49. })
50. }
51. }
52. })