vue仿淘寶訂單狀態(tài)的tab切換效果

<div class="navigation">
 //這里是通過循環(huán)遍歷出來的數據，你需要根據index的值來判斷你現在點擊的是第幾個tab欄導航，同時在js中寫一個navChange的方法來把index 傳遞到就js中來改變tabIndex(這是在初始化時設置的默認index)的值
  <span v-for="(item, index) in navItems" v-touch:tap=" { event: navChange, params: [index] }">
   <em> {{item.text}} </em>   
  </span>
</div>
 //上面的v-touch:tap 是我們自己封裝的點擊事件指令，跟v-click用法差不多

<div class="content">
 <div class="main">
  //div item中是需要切換的訂單數據，for循環(huán)遍歷的是各種訂單狀態(tài)的集合orderAllItem，然后通過選擇的tab值對應的index來判斷調用orderAllItem中的第幾個數組進行循環(huán)遍歷
  <div class="item" v-for="item in orderAllItem[tabIndex]">
    <div class="title">
     <span class="id">訂單號：{{item.orderId}}</span>
     <span class="status" >{{item.statusName}}</span>
    </div>
    <div class="toys" v-touch:tap="{ event: goToDetail, params: [item.orderId]}">
     <div class="toy" v-for="toy in item.toys">
      <img class="toyImg" :src="toy.image"/>
      <div class="area">
       <em class="name">{{toy.toyName}}</em>
       <span class="age">適合年齡：{{toy.ageRange}}</span
      </div>
     </div>
    </div>
   </div>
  </div>
</div>

var _default = (function(){
 var navs = [
  {
   'text': '全部訂單', 
  },
  {
   'text': '待付款',
  },
  {
   'text': '待收貨',
  },   
  {
   'text': '待歸還',
  },
  {
   'text': '已完成',
  }
 ];
 var orders= [
  //因為沒有合適的數據來源，所以假裝這里就是從后端請求的所有的訂單集合，在下邊data中你需要吧你分類的訂單根據狀態(tài)進行分類。
 ];
 return {
  name: 'index',
  mounted: function(){

  },
  destoryed: function(){

  },
  data: function(){
   //待付款
   var paymentsItem = [];
   //待收貨
   var receiptsItem = [];
   //待歸還
   var returnsItem = [];
   //已完成
   var completesItem = [];

   //把所有不同狀態(tài)的訂單通過if判斷push到相對應的訂單狀態(tài)集合中。
   orders.forEach(function(order){
    if(order.status == 0){
     paymentsItem.push(order);
    };
    if(order.status == 3){
     receiptsItem.push(order);
    };
    if(order.status == 5){
     returnsItem.push(order);
    };
    if(order.status == 13){
     completesItem.push(order);
    }
   });
   //設置一個空數組，把所有狀態(tài)下的訂單集合放到空數組中，從0-5的順序按照你的自己設置的tab切換的內容0-5的順序對應排列，
   var orderAll = [ orders, paymentsItem, receiptsItem, returnsItem, completesItem];
   console.log(orderAll);
   return {
    navItems : navs,
    //全部訂單分類的集合
    orderAllItem : orderAll,
    //設置
    tabIndex : 0,
   };
  },
  methods: {
   navChange: function (e, index){

    this.tabIndex = index;
//    console.log(this.tabIndex)
   }
  }
 }
})();

export default _default;