常用效果分享：swiper制作tab切换

//----------index.html

1. <view class="swiper-tab">
2. <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Seside1</view>
3. <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">Seside2</view>
4. <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">Seside3</view>
5. </view>
6. <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
7. <swiper-item>
8. <view>Seside1</view>
9. </swiper-item>
10.  
11. <swiper-item>
12. <view>Seside2</view>
13. </swiper-item>
14.  
15. <swiper-item>
16. <view>Seside3</view>
17. </swiper-item>
18. </swiper>

//----------index.css

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{
8. font-size: 30rpx;
9. display: inline-block;
10. width: 20%;
11. color: #777777;
12. }
13. .on{
14. color: #da7c0c;
15. border-bottom: 5rpx solid #da7c0c;
16. }
17. .swiper-box{
18. display: block;
19. height: 100%;
20. width: 100%;
21. overflow: hidden;
22. }
23. .swiper-box view{
24. text-align: center;
25. }

//----------index.js

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