首页 > web前端 > js教程 > 正文

实例详解vue仿淘宝订单状态的tab切换效果

小云云
发布: 2017-12-28 11:46:32
原创
2877 人浏览过

本文主要为大家详细介绍了vue仿淘宝订单状态tab切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

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

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>
登录后复制

JS代码


var _default = (function(){
 var navs = [
  {
   &#39;text&#39;: &#39;全部订单&#39;, 
  },
  {
   &#39;text&#39;: &#39;待付款&#39;,
  },
  {
   &#39;text&#39;: &#39;待收货&#39;,
  },   
  {
   &#39;text&#39;: &#39;待归还&#39;,
  },
  {
   &#39;text&#39;: &#39;已完成&#39;,
  }
 ];
 var orders= [
  //因为没有合适的数据来源,所以假装这里就是从后端请求的所有的订单集合,在下边data中你需要吧你分类的订单根据状态进行分类。
 ];
 return {
  name: &#39;index&#39;,
  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;
登录后复制

相关推荐:

vue.js实现仿淘宝结账页面实例分享

JavaScript仿淘宝实现放大镜效果的实例

Javascript小案例:仿淘宝搜索框用户输入

以上是实例详解vue仿淘宝订单状态的tab切换效果的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板