vue仿淘宝订单状态的tab切换效果

<div class="navigation">

 //这里是通过循环遍历出来的数据，你需要根据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循环遍历的是各种订单状态的集合orderAllItem，然后通过选择的tab值对应的index来判断调用orderAllItem中的第几个数组进行循环遍历

  <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中你需要吧你分类的订单根据状态进行分类。

 ];

 return {

  name: 'index',

  mounted: function(){

 

  },

  destoryed: function(){

 

  },

  data: function(){

   //待付款

   var paymentsItem = [];

   //待收货

   var receiptsItem = [];

   //待归还

   var returnsItem = [];

   //已完成

   var completesItem = [];

 

   //把所有不同状态的订单通过if判断push到相对应的订单状态集合中。

   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);

    }

   });

   //设置一个空数组，把所有状态下的订单集合放到空数组中，从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;