Detailed example of Vue imitating the tab switching effect of Taobao order status

This article mainly introduces the tab switching effect of vue imitating Taobao order status in detail. It has a certain reference value. Interested friends can refer to it. I hope it can help everyone.

I just started using vue for a project a few days ago, and then I fumbled and wrote a small dome for tab switching in the project, imitating the tab switching for Taobao order status.

HTML code:

<p 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>
</p>
 //上面的v-touch:tap 是我们自己封装的点击事件指令，跟v-click用法差不多

<p class="content">
 <p class="main">
  //p item中是需要切换的订单数据，for循环遍历的是各种订单状态的集合orderAllItem，然后通过选择的tab值对应的index来判断调用orderAllItem中的第几个数组进行循环遍历
  <p class="item" v-for="item in orderAllItem[tabIndex]">
    <p class="title">
     <span class="id">订单号：{{item.orderId}}</span>
     <span class="status" >{{item.statusName}}</span>
    </p>
    <p class="toys" v-touch:tap="{ event: goToDetail, params: [item.orderId]}">
     <p class="toy" v-for="toy in item.toys">
      <img class="toyImg" :src="toy.image"/>
      <p class="area">
       <em class="name">{{toy.toyName}}</em>
       <span class="age">适合年龄：{{toy.ageRange}}</span
      </p>
     </p>
    </p>
   </p>
  </p>
</p>

JS code

##

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;

Related recommendations:

vue.js Example Sharing of Imitation Taobao Checkout Page

JavaScript Example of Imitation Taobao Implementation of Magnifying Glass Effect

Javascript small case: imitating Taobao search box user input

The above is the detailed content of Detailed example of Vue imitating the tab switching effect of Taobao order status. For more information, please follow other related articles on the PHP Chinese website!