申领物资页面新增组别切换

 <!--
  * @Date: 2024-07-23 12:53:15
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-07-23 14:27:11
+ * @LastEditTime: 2024-07-23 16:12:12
  * @FilePath: /temple_material_request/src/views/material_request.vue
  * @Description: 申领物资页面
 -->
 <template>
   <div class="material-request-page">
+    <van-tabs v-model:active="active" @change="onChange" sticky :color="styleColor.baseColor">
+      <van-tab v-for="index in 8" :title="'标签 ' + index">
+        <van-list
+          v-model:loading="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="onLoad"
+        >
           <div class="list-wrapper">
+            <van-sticky  :offset-top="44">
               <van-row justify="space-between" class="select-all-item">
                 <van-col span="8"><van-icon name="passed" size="1.25rem" />&nbsp;&nbsp;<span :style="{ color: styleColor.baseColor }">全选</span></van-col>
                 <van-col span="16" style="text-align: right; font-size: 0.85rem; color: #666666;">参考上次同类活动的领用情况</van-col>
               </van-row>
+            </van-sticky>
             <van-list
               v-model:loading="loading"
               :finished="finished"
@@ -31,8 +41,11 @@
                 </van-row>
               </div>
             </van-list>
-      <div style="height: 5rem;"></div>
+            <div style="height: 3rem;"></div>
           </div>
+        </van-list>
+      </van-tab>
+    </van-tabs>
     <div class="control-bar">
       <div>
         <van-button icon="plus" type="primary" :color="styleColor.baseColor" @click="addMore">添加更多</van-button>
@@ -64,6 +77,11 @@ useTitle($route.meta.title);
 
 const num_value = ref('');
 
+const active = ref(0);
+const onChange = (index) => {
+  console.warn(index);
+}
+
 const list = ref([]);
 const loading = ref(false);
 const finished = ref(false);
@@ -109,6 +127,8 @@ const goShoppingCart = () => { // 跳转购物车
     width: 100%;
     .select-all-item {
       padding: 0.5rem 1rem;
+      border-top: 1px solid #f0f0f0;
+      background-color: white;
     }
     .list-boxer {
       margin: 0; padding: 1rem; border-top: 1px solid #f0f0f0;