refactor: 优化自定义导航栏页面

components/uni-navbar-lite/uni-navbar-lite.uvue

 <template>
-    <view class="uni-navbar">
-        <view class="uni-navbar-inner" :style="navbarStyle">
-            <view class="left-content" @click="back">
-                <text class="uni-icons">{{unicode}}</text>
-            </view>
-            <view class="uni-navbar-content" :class="{'is-left':isLeft}">
-                <slot>{{title}}</slot>
-            </view>
-            <view class="right-content">
-                <slot name="right"></slot>
-            </view>
-        </view>
+  <view class="uni-navbar">
+    <view class="uni-navbar-inner" :style="navbarStyle">
+      <view class="left-content" @click="back">
+        <text :style="{ color: textColor }" class="uni-icons">{{
+          unicode
+        }}</text>
+      </view>
+      <view class="uni-navbar-content" :class="{ 'is-left': isLeft }">
+        <text :style="{ color: textColor }">
+          <slot>{{ title }}</slot>
+        </text>
+      </view>
+      <view class="right-content">
+        <slot name="right"></slot>
+      </view>
     </view>
+  </view>
 </template>
 
 <script>
-    import iconpath from './uniicons.ttf'
-    export default {
-        name: "uni-navbar",
-        props: {
-        	title: {
-        		type: String,
-        		default: ''
-        	},
-        	isLeft: {
-        		type: Boolean,
-        		default: false
-        	}
+  import iconpath from "./uniicons.ttf";
+  export default {
+    name: "uni-navbar",
+    props: {
+      title: {
+        type: String,
+        default: "",
+      },
+      isLeft: {
+        type: Boolean,
+        default: false,
+      },
+      textColor: {
+        type: String,
+        default: "#000",
+      },
+    },
+    data() {
+      return {
+        statusBarHeight: 0,
+      };
+    },
+    computed: {
+      navbarStyle() : string {
+        return `margin-top:${this.statusBarHeight}px`;
+      },
+      unicode() : string {
+        return "\ue600";
+      },
+    },
+    created() {
+      uni.loadFontFace({
+        global: false,
+        family: "UniIconsFontFamily",
+        source: `url("${iconpath}")`,
+        success() { },
+        fail(err) {
+          console.log(err);
         },
-        data() {
-            return {
-                statusBarHeight: 0
-            };
-        },
-        computed: {
-            navbarStyle() : string {
-                return `margin-top:${this.statusBarHeight}px`
-            },
-            unicode() : string {
-                return '\ue600'
-            }
-        },
-        created() {
-            uni.loadFontFace({
-                global: false,
-                family: 'UniIconsFontFamily',
-                source: "url(" + iconpath + ")",
-                success() { },
-                fail(err) {
-                    console.log(err);
-                },
-            })
-            const sys = uni.getSystemInfoSync()
-            const statusBarHeight = sys.statusBarHeight
-            this.statusBarHeight = statusBarHeight
-        },
-        mounted() {
-          // TODO 暂时加定时器，否则不生效
-          setTimeout(() => {
-            uni.setNavigationBarColor({
-                frontColor: '#000000',
-                backgroundColor: '#ffffff'
-            })
-          }, 100)
-        },
-        methods: {
-            back() {
-                uni.navigateBack({})
-            }
-        },
-    }
+      });
+      const sys = uni.getSystemInfoSync();
+      const statusBarHeight = sys.statusBarHeight;
+      this.statusBarHeight = statusBarHeight;
+    },
+    mounted() {
+      // TODO 暂时加定时器，否则不生效
+      setTimeout(() => {
+        uni.setNavigationBarColor({
+          frontColor: "#000000",
+          backgroundColor: "#ffffff",
+        });
+      }, 100);
+    },
+    methods: {
+      back() {
+        uni.navigateBack({});
+      },
+    },
+  };
 </script>
 
 <style>
-    .uni-icons {
-        font-family: "UniIconsFontFamily" !important;
-        font-size: 22px;
-        font-style: normal;
-        color: #333;
-    }
-    .uni-navbar {
-        border: 1px #eee solid;
-        background-color: #fff;
-    }
-    .uni-navbar-inner {
-        position: relative;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        height: 45px;
-    }
+  .uni-icons {
+    font-family: "UniIconsFontFamily" !important;
+    font-size: 22px;
+    font-style: normal;
+    color: #333;
+  }
+
+  .uni-navbar {
+    border: 1px #eee solid;
+    background-color: #007aff;
+  }
+
+  .uni-navbar-inner {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    height: 45px;
+  }
+
+  .left-content,
+  .right-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 45px;
+    height: 100%;
+  }
 
-    .left-content,
-    .right-content {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 45px;
-        height: 100%;
-    }
+  .uni-navbar-content {
+    position: absolute;
+    height: 100%;
+    top: 0;
+    bottom: 0;
+    left: 45px;
+    right: 45px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
 
-    .uni-navbar-content {
-        position: absolute;
-        height: 100%;
-        top: 0;
-        bottom: 0;
-        left: 45px;
-        right: 45px;
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
-    }
-    .is-left {
-      justify-content: flex-start;
-    }
+  .is-left {
+    justify-content: flex-start;
+  }
 </style>

pages/API/set-navigation-bar-color/set-custom-navigation-bar-color.uvue

-<template>
-  <view>
-    <view class="custom-navigation">
-      <text
-        class="back-icon"
-        @click="back"
-        :style="`color:${navigationBarTextColor}`"
-        >{{ backIcon }}</text
-      >
-      <text class="title" :style="`color:${navigationBarTextColor}`"
-        >自定义导航栏</text
-      >
-    </view>
-    <page-head title="setCustomNavigationBarColor"></page-head>
-    <view class="uni-padding-wrap uni-common-mt">
-      <button @tap="setNavigationBarColor1" class="uni-btn">
-        设置自定义导航栏前景色白色
-      </button>
-      <button @tap="setNavigationBarColor2" class="uni-btn">
-        设置自定义导航栏前景色黑色
-      </button>
-    </view>
-  </view>
-</template>
-
-<script lang="uts">
-import { state, setLifeCycleNum } from '@/store/index.uts'
-
-export default {
-  data() {
-    return {
-      backIcon: '\ue582',
-      navigationBarTextColor: '#fff'
-    }
-  },
-  onShow(){
-    uni.loadFontFace({
-      family: 'UniFontFamily',
-      source: 'url(static/font/uni.ttf)'
-    })
-  },
-  methods: {
-    back(){
-      uni.navigateBack()
-    },
-    setNavigationBarColor1() {
-      uni.setNavigationBarColor({
-        frontColor: '#ffffff',
-        backgroundColor: '#0000',
-        success: () => {
-          this.navigationBarTextColor = '#fff'
-          console.log('setNavigationBarColor success')
-          this.setLifeCycleNum(state.lifeCycleNum + 1)
-        },
-        fail: () => {
-          console.log('setNavigationBarColor fail')
-          this.setLifeCycleNum(state.lifeCycleNum - 1)
-        },
-        complete: () => {
-          console.log('setNavigationBarColor complete')
-          this.setLifeCycleNum(state.lifeCycleNum + 1)
-        }
-      })
-    },
-    setNavigationBarColor2() {
-      uni.setNavigationBarColor({
-        frontColor: '#000000',
-        backgroundColor: '#0000',
-        success: () => {
-          this.navigationBarTextColor = '#000'
-          console.log('setNavigationBarColor success')
-          this.setLifeCycleNum(state.lifeCycleNum + 1)
-        },
-        fail: () => {
-          console.log('setNavigationBarColor fail')
-          this.setLifeCycleNum(state.lifeCycleNum - 1)
-        },
-        complete: () => {
-          console.log('setNavigationBarColor complete')
-          this.setLifeCycleNum(state.lifeCycleNum + 1)
-        }
-      })
-    },
-    // 自动化测试
-    getLifeCycleNum(): number {
-      return state.lifeCycleNum
-    },
-    // 自动化测试
-    setLifeCycleNum(num: number) {
-      setLifeCycleNum(num)
-    },
-  },
-}
-</script>
-
-<style>
-.custom-navigation {
-  padding-top: 40px;
-  padding-bottom: 10px;
-  background-color: #007aff;
-}
-.custom-navigation > .title {
-  margin: 0 auto;
-}
-.custom-navigation > .back-icon {
-  position: absolute;
-  font-family: UniFontFamily;
-  font-size: 20px;
-  left: 10px;
-}
-</style>

pages/API/set-navigation-bar-color/set-navigation-bar-color.uvue

@@ -66,7 +66,7 @@ export default {
     },
     goCustomNavigation(){
       uni.navigateTo({
-        url: '/pages/API/set-navigation-bar-color/set-custom-navigation-bar-color'
+        url: '/pages/template/navbar-lite/navbar-lite'
       })
     }
   },

pages/API/set-navigation-bar-color/set-custom-navigation-bar-color.test.js → pages/template/navbar-lite/navbar-lite.test.js

 const CURRENT_PAGE_PATH =
-  "/pages/API/set-navigation-bar-color/set-custom-navigation-bar-color";
+  "/pages/template/navbar-lite/navbar-lite";
 
 describe("setCustomNavigationBarColor", () => {
   let page;

pages/template/navbar-lite/navbar-lite.uvue

 <template>
   <view class="content">
-    <uni-navbar-lite :title="title" :is-left="isLeft"></uni-navbar-lite>
+    <uni-navbar-lite :title="title" :is-left="isLeft" :text-color="navigationBarTextColor"></uni-navbar-lite>
     <scroll-view class="scroll-view" scroll-y="true">
       <view class="content-item" @click="onClick">
         <text>点击此处，将标题切换为{{isLeft?'居中':'左侧'}}显示</text>
@@ -8,24 +8,80 @@
       <view class="content-item" v-for="item in 100">
         <text class="text">内容：{{item}}</text>
       </view>
-      <input/>
+      <input/>
+      <view class="uni-padding-wrap uni-common-mt">
+        <button @tap="setNavigationBarColor1" class="uni-btn">
+          设置自定义导航栏前景色白色
+        </button>
+        <button @tap="setNavigationBarColor2" class="uni-btn">
+          设置自定义导航栏前景色黑色
+        </button>
+      </view>
     </scroll-view>
   </view>
 </template>
 
-<script>
+<script>
+  import { state, setLifeCycleNum } from '@/store/index.uts'
   export default {
     data() {
       return {
         title: 'Hello uni-app',
-        isLeft: false
+        isLeft: false,
+        navigationBarTextColor: '#000'
+
       }
     },
-    onLoad() { },
     methods: {
       onClick(){
         this.isLeft = !this.isLeft
-      }
+      },
+      setNavigationBarColor1() {
+        uni.setNavigationBarColor({
+          frontColor: '#ffffff',
+          backgroundColor: '#0000',
+          success: () => {
+            this.navigationBarTextColor = '#fff'
+            console.log('setNavigationBarColor success')
+            this.setLifeCycleNum(state.lifeCycleNum + 1)
+          },
+          fail: () => {
+            console.log('setNavigationBarColor fail')
+            this.setLifeCycleNum(state.lifeCycleNum - 1)
+          },
+          complete: () => {
+            console.log('setNavigationBarColor complete')
+            this.setLifeCycleNum(state.lifeCycleNum + 1)
+          }
+        })
+      },
+      setNavigationBarColor2() {
+        uni.setNavigationBarColor({
+          frontColor: '#000000',
+          backgroundColor: '#0000',
+          success: () => {
+            this.navigationBarTextColor = '#000'
+            console.log('setNavigationBarColor success')
+            this.setLifeCycleNum(state.lifeCycleNum + 1)
+          },
+          fail: () => {
+            console.log('setNavigationBarColor fail')
+            this.setLifeCycleNum(state.lifeCycleNum - 1)
+          },
+          complete: () => {
+            console.log('setNavigationBarColor complete')
+            this.setLifeCycleNum(state.lifeCycleNum + 1)
+          }
+        })
+      },
+      // 自动化测试
+      getLifeCycleNum(): number {
+        return state.lifeCycleNum
+      },
+      // 自动化测试
+      setLifeCycleNum(num: number) {
+        setLifeCycleNum(num)
+      },
     }
   }
 </script>