uni-app 制作tab切换,查看用户订单状况,分为全部 ,待发货,待收货 ,已完成 ,退款,5个状态,点击不同状态出现不同订单,代码如何实现
时间: 2023-12-07 21:05:38 浏览: 74
scrollswiper.zip
首先,在uni-app中制作tab切换有多种方式,这里介绍一种比较简单的方式,即使用`uni-tabbar`组件和`uni-tabbar-item`组件结合使用。
1. 在`template`中添加`uni-tabbar`和`uni-tabbar-item`组件,并设置相关属性:
```
<template>
<view>
<uni-tabbar :current="current" @click="changeTab">
<uni-tabbar-item title="全部" icon="home"></uni-tabbar-item>
<uni-tabbar-item title="待发货" icon="add"></uni-tabbar-item>
<uni-tabbar-item title="待收货" icon="search"></uni-tabbar-item>
<uni-tabbar-item title="已完成" icon="settings"></uni-tabbar-item>
<uni-tabbar-item title="退款" icon="camera"></uni-tabbar-item>
</uni-tabbar>
</view>
</template>
<script>
export default {
data() {
return {
current: 0 // 默认选中第一个tab
};
},
methods: {
changeTab(e) {
// 切换tab时更新current
this.current = e.index;
}
}
};
</script>
```
2. 在`script`中定义订单数据,并根据不同的tab状态筛选订单:
```
<template>
<view>
<!-- ... -->
<!-- 订单列表 -->
<view v-for="(order, index) in orders" :key="index" v-show="checkStatus(order)">
<!-- 订单内容 -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
current: 0, // 默认选中第一个tab
orders: [ // 订单数据
{ status: 0, content: '订单1' },
{ status: 1, content: '订单2' },
{ status: 2, content: '订单3' },
{ status: 3, content: '订单4' },
{ status: 4, content: '订单5' },
]
};
},
methods: {
changeTab(e) {
// 切换tab时更新current
this.current = e.index;
},
checkStatus(order) {
// 根据订单状态返回是否显示该订单
switch (this.current) {
case 0: // 全部
return true;
case 1: // 待发货
return order.status === 0;
case 2: // 待收货
return order.status === 1;
case 3: // 已完成
return order.status === 2;
case 4: // 退款
return order.status === 3;
default:
return false;
}
}
}
};
</script>
```
这样,就可以根据不同的tab状态筛选出对应的订单了。当然,具体的订单内容和状态判断方式还需要根据项目实际情况进行调整。
阅读全文