一：顶部导航栏的实现

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.