微客导航 » 文章资讯 » vue仿淘宝订单状态的tab切换效果

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

2023-09-21 16:35:05 270

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

HTML代码：


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

{{item.text}}

//上面的v-touch:tap是我们自己封装的点击事件指令，跟v-click用法差不多 //divitem中是需要切换的订单数据，for循环遍历的是各种订单状态的集合orderAllItem，然后通过选择的tab值对应的index来判断调用orderAllItem中的第几个数组进行循环遍历订单号：{{item.orderId}} {{item.statusName}}

{{toy.toyName}} 适合年龄：{{toy.ageRange}}

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;

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

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐