vue仿淘宝订单状态的tab切换效果
前几天刚开始使用vue做项目,然后自己就在项目中摸索写了一个tab切换的小dome,仿淘宝订单状态的tab切换。
HTML代码:
//这里是通过循环遍历出来的数据,你需要根据index的值来判断你现在点击的是第几个tab栏导航,同时在js中写一个navChange的方法来把index传递到就js中来改变tabIndex(这是在初始化时设置的默认index)的值 {{item.text}}
前几天刚开始使用vue做项目,然后自己就在项目中摸索写了一个tab切换的小dome,仿淘宝订单状态的tab切换。
HTML代码:
//这里是通过循环遍历出来的数据,你需要根据index的值来判断你现在点击的是第几个tab栏导航,同时在js中写一个navChange的方法来把index传递到就js中来改变tabIndex(这是在初始化时设置的默认index)的值 {{item.text}}
JS代码
var_default=(function(){ varnavs=[ { 'text':'全部订单', }, { 'text':'待付款', }, { 'text':'待收货', }, { 'text':'待归还', }, { 'text':'已完成', } ]; varorders=[ //因为没有合适的数据来源,所以假装这里就是从后端请求的所有的订单集合,在下边data中你需要吧你分类的订单根据状态进行分类。 ]; return{ name:'index', mounted:function(){ }, destoryed:function(){ }, data:function(){ //待付款 varpaymentsItem=[]; //待收货 varreceiptsItem=[]; //待归还 varreturnsItem=[]; //已完成 varcompletesItem=[]; //把所有不同状态的订单通过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的顺序对应排列, varorderAll=[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) } } } })(); exportdefault_default;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。