首页吸顶

src/views/home/index.module.less

@@ -1,6 +1,7 @@
-body{
+body {
     background: transparent !important;
 }
+
 .homeTab {
     & :global {
         .van-tabs__nav:not(.van-tabs__nav--shrink) {
@@ -19,14 +20,28 @@ body{
         }
     }
 
-    & div:first-child {
+    &>div:first-child {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 10;
+    }
+    
+
+    &>div:nth-child(2) {
         :global {
-            .van-sticky--fixed {
-                background: #fff;
+            .van-tab__panel {
+                padding-top: var(--van-tabs-line-height);
             }
         }
     }
 }
+.strickyTop{
+    &>div:first-child{
+        background-color: #fff;
+    }
+}
 
 .item {
     margin: 12px;

src/views/home/index.tsx

@@ -14,7 +14,9 @@ export default defineComponent({
       /** 乐团列表 */
       musicGroups: [] as IMusicGroup[],
       tab: 'home',
-      reloadTotal: 0
+      reloadTotal: 0,
+      /** 是否吸顶 */
+      isStricky: false
     });
     /** 获取学校乐团列表 */
     const getMusicGroup = async () => {
@@ -33,16 +35,18 @@ export default defineComponent({
     onMounted(() => {
       getMusicGroup();
       listenerMessage('webViewOnResume', reloadData);
+      listenerMessage('stickyTop', (res) => {
+        homeData.isStricky = res?.content?.status == 0 ? false : true;
+      });
     });
     return () => (
       <div class={styles.home}>
         <Tabs
           v-model:active={homeData.tab}
-          class={styles.homeTab}
+          class={[styles.homeTab, homeData.isStricky && styles.strickyTop]}
           swipeThreshold={3}
           animated
-          swipeable
-          sticky>
+          swipeable>
           <Tab title="数据汇总" name="home">
             <ContentItem reloadTotal={homeData.reloadTotal} />
           </Tab>