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

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

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

HTML 代码：

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

{{item.text}}

//上面的v-touch:tap 是我们自己封装的点击事件指令，跟v-click用法差不多

//div item中是需要切换的订单数据，for循环遍历的是各种订单状态的集合orderAllItem，然后通过选择的tab值对应的index来判断调用orderAllItem中的第几个数组进行循环遍历

订单号：{{item.orderId}}

{{item.statusName}}

{{toy.toyName}}

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

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;

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。