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

前几天刚开始使用vue 做项目，然后自己就在项目中摸索写了一个tab切换的小dome，仿淘宝订单状态的tab切换。

HTML 代码：

 //这里是通过循环遍历出来的数据，你需要根据index的值来判断你现在点击的是第几个tab栏导航，同时在js中写一个navChange的方法来把index 传递到就js中来改变tabIndex(这是在初始化时设置的默认index)的值
 
   {{item.text}}   
 

 //上面的v-touch:tap 是我们自己封装的点击事件指令，跟v-click用法差不多


 
 //div item中是需要切换的订单数据，for循环遍历的是各种订单状态的集合orderAllItem，然后通过选择的tab值对应的index来判断调用orderAllItem中的第几个数组进行循环遍历
 
  
   订单号：{{item.orderId}}
   {{item.statusName}}
  
  
   
   
   
    {{toy.toyName}}
    适合年龄：{{toy.ageRange}}

JS代码

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;


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。