微信小程序---Tab标签页

1. wxml代码

  
    
      
    
    我的订单
  
    
    未支付  
    已支付  
    已取消  
    已完成  
    待评价  
    已评价  
    
  
  
  
         
       111
       
  
        
       222
        
  
        
       333
        
  
        
       444
        
  
        
       555
        
  
        
       666
        
   

2. wxss代码

.swiper-tab{  
    width: 100%;  
    border-bottom: 1px solid #dadada;
    text-align: center;  
    line-height: 80rpx;
}  
.swiper-tab-list{  
    font-size: 30rpx;  
    display: inline-block;  
    width: 16%;  
}  
.on{
   border-bottom: 5rpx solid #63b4ad;
}   
.swiper-box{ 
  display: block; 
  height: 100%; 
  width: 100%; 
  overflow: hidden;
}   
.swiper-items{
  height: 100%;
}
.scroll-views{
  height: 100%;
}

3. js代码

 /**
   * 页面的初始数据
   */
  data: {
    // tab切换  
    currentTab: 0
  },
 /** 
    * 滑动切换tab  
    */
  bindChange: function (e) {

    var that = this;
    that.setData({ currentTab: e.detail.current });

  },
  /** 
   * 点击tab切换 
   */
  swichNav: function (e) {

    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  }