fix: 自定义导航 固定位置

src/components/MNavBar/index.vue

@@ -2,13 +2,14 @@
  * @Author: wjc
  * @Date: 2024-07-03 10:35:44
  * @LastEditors: wjc
- * @LastEditTime: 2024-07-04 15:24:50
+ * @LastEditTime: 2024-07-09 10:48:54
  * @Description: 
 -->
 <template>
   <up-navbar
     ref="mNavBarRef"
     v-bind="$attrs"
+    class="m-navbar"
     :title="title"
     placeholder
     :bg-color="bgColor"
@@ -53,7 +54,7 @@
       bgColor?: string
       rightMenu?: RightMenuItem[]
     }>(),
-    { boolean: true, bgColor: 'transparent' }
+    { boolean: true, bgColor: '#fff' }
   )
   const emits = defineEmits<{
     (e: 'right-click', command: string): void
@@ -72,34 +73,30 @@
   }
 </script>
 
-<script lang="ts">
-  export default {
-    name: 'MNavBar',
-  }
-</script>
-
 <style scoped lang="scss">
-  .right-box {
-    @apply relative w-full z-1;
-    .overlay {
-      @apply fixed inset-0px opacity-100;
-      background: rgba(0, 0, 0, 0);
-    }
-    .menu-box {
-      @apply absolute right-0px z-10 flex flex-col gap-6px w-auto whitespace-nowrap rounded-6px bg-white;
-      box-shadow: 0px 0px 10px rgba(0, 0, 0, 20%);
-      .menu-item {
-        @apply flex items-center gap-8px h-full flex-1 px-16px py-8px text-left;
-        .menu-item-icon {
-          @apply wh-30px;
+  .m-navbar {
+    .right-box {
+      @apply relative w-full z-1;
+      .overlay {
+        @apply fixed inset-0px opacity-100;
+        background: rgba(0, 0, 0, 0);
+      }
+      .menu-box {
+        @apply absolute right-0px z-10 flex flex-col gap-6px w-auto whitespace-nowrap rounded-6px bg-white;
+        box-shadow: 0px 0px 10px rgba(0, 0, 0, 20%);
+        .menu-item {
+          @apply flex items-center gap-8px h-full flex-1 px-16px py-8px text-left;
+          .menu-item-icon {
+            @apply wh-30px;
+          }
+          .menu-item-text {
+            @apply w-full text-left;
+          }
         }
-        .menu-item-text {
-          @apply w-full text-left;
+        .menu-item-hover {
+          @apply bg-gray-100;
         }
       }
-      .menu-item-hover {
-        @apply bg-gray-100;
-      }
     }
   }
 </style>

src/components/MPage/index.vue

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2024-06-18 11:40:55
  * @LastEditors: wjc
- * @LastEditTime: 2024-07-08 18:00:43
+ * @LastEditTime: 2024-07-09 11:08:08
  * @Description: 
 -->
 <template>
@@ -26,8 +26,10 @@
 
 <style scoped lang="scss">
   .m-page {
-    @apply flex-1 h-100% bg-white p-12px;
+    @apply relative flex-1 h-full p-12px overflow-y-auto;
     background: linear-gradient(180deg, #c5e6ff 0%, #ffffff 100%);
-    backdrop-filter: blur(57px);
+    :deep(.m-footer) {
+      padding-bottom: 25px;
+    }
   }
 </style>

src/pages.json

@@ -75,7 +75,7 @@
 		{
 			"path": "pages/test/index",
 			"actions": ["login"],
-			"layout": false,
+			"layout": true,
 			"style": {
 				"navigationStyle": "custom"
 			}

src/pages/index/index.vue

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2019-08-22 19:41:20
  * @LastEditors: wjc
- * @LastEditTime: 2024-07-08 17:16:02
+ * @LastEditTime: 2024-07-09 10:11:27
  * @Description: 
 -->
 <template>
@@ -18,6 +18,7 @@
     </view>
     <u-button type="primary" text="确定"></u-button>
     <u-button @click="onTest">前往 Auth 页面</u-button>
+    <view style="height: 500px; background: #fff">长内容</view>
   </view>
   <MTabBar></MTabBar>
 </template>

src/pages/test/index.vue

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2024-07-02 10:07:46
  * @LastEditors: wjc
- * @LastEditTime: 2024-07-04 14:27:51
+ * @LastEditTime: 2024-07-09 10:45:09
  * @Description: 
 -->
 <template>
@@ -10,6 +10,7 @@
     <!-- <template #right><view>123</view></template> -->
   </MNavBar>
   <view>需要登录才能查看的页面</view>
+  <view class="h-1000px bg-#eee">长内容</view>
 </template>
 
 <script setup lang="ts">