Exemple détaillé de Vue imitant l'effet de changement d'onglet du statut de la commande Taobao

Cet article présente principalement l'effet de changement d'onglet de la vue imitant le statut de la commande Taobao en détail. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Je viens de commencer à utiliser vue pour réaliser un projet il y a quelques jours, puis j'ai tâtonné et écrit un petit dôme pour le changement d'onglet dans le projet, imitant le changement d'onglet du statut de la commande Taobao.

Code HTML :

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

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

Recommandations associées :

Exemple de partage Vue.js d'imitation de la page de paiement Taobao

JavaScript imitant Taobao, exemple de mise en œuvre de l'effet de loupe

Petit boîtier Javascript : imitation de la saisie utilisateur du champ de recherche Taobao

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!