封装导航栏的应用

components/custom-navbar/README.md

@@ -15,7 +15,7 @@
 ```vue
 <template>
   <view class="page">
-    <custom-navbar title="页面标题" @back="onBack" />
+    <custom-navbar title="页面标题" />
     <!-- 页面内容，无需设置 margin-top -->
     <view class="content">
       <text>页面内容</text>
@@ -29,11 +29,6 @@ import CustomNavbar from "@/components/custom-navbar/custom-navbar.vue";
 export default {
   components: {
     CustomNavbar
-  },
-  methods: {
-    onBack() {
-      console.log('返回按钮被点击');
-    }
   }
 }
 </script>
@@ -45,7 +40,6 @@ export default {
 <custom-navbar 
   title="页面标题" 
   :backIcon="customBackIcon"
-  @back="onBack" 
 />
 ```
 
@@ -61,7 +55,7 @@ export default {
 ### 添加右侧内容
 
 ```vue
-<custom-navbar title="页面标题" @back="onBack">
+<custom-navbar title="页面标题">
   <template #right>
     <view class="right-content">
       <text>右侧内容</text>
@@ -82,7 +76,7 @@ export default {
 
 | 事件名 | 说明 | 回调参数 |
 |--------|------|----------|
-| back | 点击返回按钮时触发 | - |
+| back | 点击返回按钮时触发（可选，组件会自动执行返回逻辑） | - |
 
 ## Slots
 

components/custom-navbar/custom-navbar.vue

@@ -64,7 +64,9 @@ export default {
     },
     handleBack() {
       if (this.showBack) {
+        // 先触发自定义事件，让父组件有机会处理
         this.$emit('back');
+        // 自动执行返回逻辑
         uni.navigateBack({
           delta: 1
         });

pages/institutionalStructure/institutionalStructure.vue

@@ -1,8 +1,6 @@
 <template>
   <view class="page">
-    <u-navbar title="建制" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#695347'
-              title-size='36' height='50' :title-style="{ fontWeight: 2000 }" id="navbar">
-    </u-navbar>
+    <custom-navbar title="建制" />
     <view class="tile">
       <view class="tile-item" v-for="(item, index)  in 10" :key="index">
         <image :src="tilesImageEnum.TILE" mode="aspectFit" class="tile-image"></image>
@@ -44,8 +42,12 @@
 <script>
 import { tilesImageEnum } from '@/enum/institutionalStructure.js';
 import { getInstitutionalList } from '@/api/institutionalStructure.js';
+import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
 
 export default {
+  components: {
+    CustomNavbar
+  },
   data() {
     return {
       bgc: {

pages/monk/monkDetail.vue

@@ -4,9 +4,7 @@
     <image class="bg-image" src="https://api.ccttiot.com/smartmeter/img/static/uz3vQk44WkGnJPVjKrw1"
            mode="aspectFill"></image>
 
-    <u-navbar title="高僧详情" :border-bottom="false" back-icon-color="#262B37" title-color='#695347' title-size='36'
-              height='50' id="navbar">
-    </u-navbar>
+    <custom-navbar title="高僧详情" />
     <view class="container">
       <view class="header">
         <view class="content">
@@ -50,8 +48,12 @@
 import CommonEnum from "../../enum/common";
 import MonkEnum from "../../enum/monk";
 import {getMonkDetail} from "../../api/monk/monkDetail.js";
+import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
 
 export default {
+  components: {
+    CustomNavbar
+  },
   computed: {
     MonkEnum() {
       return MonkEnum

pages/walkInto/walkInto.vue

@@ -3,7 +3,6 @@
     <!-- 自定义导航栏 -->
     <custom-navbar 
       title="走进平山"
-      @back="onBack"
     />
 
     <view class="header">
@@ -28,10 +27,7 @@ export default {
     }
   },
   methods: {
-    onBack() {
-      // 可以在这里添加返回前的逻辑
-      console.log('返回按钮被点击');
-    }
+    // 如果需要自定义返回逻辑，可以添加 @back 事件监听
   }
 }
 </script>