一：頂部導(dǎo)航欄的實(shí)現(xiàn)

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

1. .swiper-tab{
2. width: 100%;
3. border-bottom: 2rpx solid #777777;
4. text-align: center;
5. line-height: 80rpx;
6. }
7. .swiper-tab-list{ font-size: 30rpx;
8. display: inline-block;
9. width: 20%;
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. var app = getApp()
2. Page( {
3. data: {
4. /**
5. * 頁面配置
6. */
7. winWidth: 0,
8. winHeight: 0,
9. // tab切換
10. currentTab: 0,
11. },
12. onLoad: function() {
13. var that = this;
14.  
15. /**
16. * 獲取系統(tǒng)信息
17. */
18. wx.getSystemInfo( {
19.  
20. success: function( res ) {
21. that.setData( {
22. winWidth: res.windowWidth,
23. winHeight: res.windowHeight
24. });
25. }
26.  
27. });
28. },
29. /**
30. * 滑動(dòng)切換tab
31. */
32. bindChange: function( e ) {
33.  
34. var that = this;