免费校园网站建设服务营销策划方案

---

前言

根据订单的不同状态展示订单列表，并实现多Tabs分页加载。

一、准备静态结构（分包）

右键pagesOrder新建分包list

二、Tabs滑动切换

订单列表的Tabs支持滑动切换，从【我的】进入订单列表，能高亮对应下标。

1.Tabs文字渲染

2.点文字高亮切换

3.swiper滑动切换

三、Tabs页面跳转高亮

在【我的】Tabs页点击我的订单的某类型，进行页面传参跳转至订单列表页，订单列表页接收参数并查找高亮下标显示。

个人中心页

订单列表页

四、订单列表渲染

1.封装列表组件

由于每个订单列表需要单独维护，将订单列表封装个组件方便管理。将订单列表页的订单列表部分剪贴至新建OrderList.vue

列表组件 OrderList.vue

<script setup lang="ts">// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()</script><template><!-- 订单列表 --><scroll-view scroll-y class="orders"><view class="card" v-for="item in 2" :key="item"><!-- 订单信息 --><view class="status"><text class="date">2023-04-14 13:14:20</text><!-- 订单状态文字 --><text>待付款</text><!-- 待评价/已完成/已取消 状态: 展示删除订单 --><text class="icon-delete"></text></view><!-- 商品信息，点击商品跳转到订单详情，不是商品详情 --><navigatorv-for="sku in 2":key="sku"class="goods":url="`/pagesOrder/detail/detail?id=1`"hover-class="none"><view class="cover"><imagemode="aspectFit"src="https://yanxuan-item.nosdn.127.net/c07edde1047fa1bd0b795bed136c2bb2.jpg"></image></view><view class="meta"><view class="name ellipsis">ins风小碎花泡泡袖衬110-160cm<</