1、index.wxml

<!--index.wxml-->  

<view class="swiper-tab">  

 <view class="swiper-tab-list {{currentTab==0 ? \'on\' : \'\'}}" data-current="0" bindtap="swichNav">哈哈</view>  

<view class="swiper-tab-list {{currentTab==1 ? \'on\' : \'\'}}" data-current="1" bindtap="swichNav">呵呵</view>  

<view class="swiper-tab-list {{currentTab==2 ? \'on\' : \'\'}}" data-current="2" bindtap="swichNav">嘿嘿</view>  

</view>  

<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">  

<!-- 我是哈哈 -->  

<swiper-item>  

<view>我是哈哈</view>  

</swiper-item>  

<!-- 我是呵呵 -->  

<swiper-item>  

<view>我是呵呵</view>  

</swiper-item>  

<!-- 我是嘿嘿 -->  

<swiper-item>  

<view>我是嘿嘿</view>  

</swiper-item>  

</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. })