顶部

src/pages/mine/index.vue

 <template>
     <!-- <Header  backgroundBox="#f8f8f8" :show="false"></Header> -->
+     <div class="header" :style="{height: contentHeight + 'px'}"></div>
     <div class="container" v-if="userStore.isLogin">
         <div class="userinfo">
             <img class="avatar" mode="aspectFill"
@@ -46,7 +47,7 @@
             </div>
         </div>
         <div class="content">
-            <van-tabs v-model:active="active" background="#f8f8f8" animated swipeable sticky offset-top="50">
+            <van-tabs v-model:active="active" background="#f8f8f8" animated swipeable sticky :offset-top="contentHeight">
                 <van-tab title="待发布">
                     <picture-list ref="waitingPublishPicture" :active="0" @total="setTotal" @refresh="handleRefreshPublishPicture" @publish="handlePublishPicture"></picture-list>
                 </van-tab>
@@ -72,6 +73,15 @@ import MoreOperations from './components/MoreOperations/index.vue'
 import Publish from './components/Publish/index.vue'
 
 useInitScroll()
+const contentHeight = ref(50)
+onLoad(() => {
+    xma.xh.getMenuButtonBoundingClientRect({
+      success(res) {
+        contentHeight.value = (res.top + res.bottom) / 2 + 25;
+      },
+    });
+})
+
 const router = useRouter()
 const userStore = useUserStore()
 const active = ref(0)
@@ -133,6 +143,12 @@ const handleOperation = (e) => {
 </script>
 
 <style lang="scss" scoped>
+.header {
+    position: sticky;
+    top: 0;
+    background-color: #f8f8f8;
+    z-index: 999;
+}
 .container {
     background-color: #f8f8f8;
     padding: 38px 12px 0 12px;