本文主要为大家详细介绍了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 = [
{
'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;
相关推荐：
vue.js实现仿淘宝结账页面实例分享
javascript仿淘宝实现放大镜效果的实例
javascript小案例：仿淘宝搜索框用户输入
以上就是实例详解vue仿淘宝订单状态的tab切换效果的详细内容。