ci: 新增首页tab 吸顶功能

src/pages/index/index.vue

@@ -127,8 +127,32 @@ const dataList = ref<any>([])
 const isProductListLoading = ref(false) // 商品列表加载状态
 
 function handlePriceTabChange() {
-  // 传入 false 阻止 reload 时滚动到顶部
-  paging.value?.reload()
+  // 获取 tabs 元素位置，确保切换后页面位置在 tabs 位置
+  uni.createSelectorQuery()
+    .select('.productList')
+    .boundingClientRect((rect: any) => {
+      if (rect) {
+        uni.createSelectorQuery()
+          .selectViewport()
+          .scrollOffset((scrollRes: any) => {
+            const currentScrollTop = scrollRes?.scrollTop || 0
+            const tabsTop = currentScrollTop + rect.top
+
+            // reload 数据
+            paging.value?.reload()
+
+            // 延迟滚动到 tabs 位置
+            setTimeout(() => {
+              uni.pageScrollTo({
+                scrollTop: tabsTop - 40,
+                duration: 0,
+              })
+            }, 100)
+          })
+          .exec()
+      }
+    })
+    .exec()
 }
 
 async function queryList(pageNo: number, pageSize: number) {
@@ -381,11 +405,15 @@ onShow(() => {
           </scroll-view>
         </view>
         <view class="productList">
-          <wd-tabs v-model="priceTab" slidable="always" :line-width="0" :line-height="0" @click="handlePriceTabChange">
-            <template v-for="item in priceTabList" :key="item">
-              <wd-tab :title="$t(item.title)" :name="item.value" />
-            </template>
-          </wd-tabs>
+          <wd-sticky :offset-top="0">
+            <view class="tabs-container">
+              <wd-tabs v-model="priceTab" slidable="always" :line-width="0" :line-height="0" @click="handlePriceTabChange">
+                <template v-for="item in priceTabList" :key="item">
+                  <wd-tab :title="$t(item.title)" :name="item.value" />
+                </template>
+              </wd-tabs>
+            </view>
+          </wd-sticky>
           <!-- Tab切换时的商品列表骨架屏 -->
           <view v-if="isProductListLoading" class="grid grid-cols-2 gap-20rpx">
             <wd-skeleton
@@ -435,5 +463,17 @@ onShow(() => {
       height: 72rpx;
     }
   }
+
+  .wd-sticky__container[style*='position: fixed'] {
+    .tabs-container {
+      width: 100vw;
+      margin-left: -24rpx;
+      padding: 28rpx 24rpx 16rpx;
+      background: rgba(255, 255, 255, 0.85);
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+    }
+  }
 }
 </style>