前几天刚开始使用vue 做项目,然后自己就在项目中摸索写了一个tab切换的小dome,仿淘宝订单状态的tab切换。
HTML 代码:
<div 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>
</div>
//上面的v-touch:tap 是我们自己封装的点击事件指令,跟v-click用法差不多
<div class="content">
<div class="main">
//div item中是需要切换的订单数据,for循环遍历的是各种订单状态的集合orderAllItem,然后通过选择的tab值对应的index来判断调用orderAllItem中的第几个数组进行循环遍历
<div class="item" v-for="item in orderAllItem[tabIndex]">
<div class="title">
<span class="id">订单号:{{item.orderId}}</span>
<span class="status" >{{item.statusName}}</span>
</div>
<div class="toys" v-touch:tap="{ event: goToDetail, params: [item.orderId]}">
<div class="toy" v-for="toy in item.toys">
<img class="toyImg" :src="toy.image"/>
<div class="area">
<em class="name">{{toy.toyName}}</em>
<span class="age">适合年龄:{{toy.ageRange}}</span
</div>
</div>
</div>
</div>
</div>
</div>
JS代码
var _default = (function(){
var navs = [
{
'text': '全部订单',
},
{
'text': '待付款',
},
{
'text': '待收货',
},
{
'text': '待归还',
},
{
'text': '已完成',
}
];
var orders= [
];
return {
name: 'index',
mounted: function(){
},
destoryed: function(){
},
data: function(){
var paymentsItem = [];
var receiptsItem = [];
var returnsItem = [];
var completesItem = [];
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);
}
});
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;
}
}
}
})();
export default _default;