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

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

@@ -2,10 +2,14 @@
   <view class="uni-navbar">
     <view class="uni-navbar-inner" :style="navbarStyle">
       <view class="left-content" @click="back">
-                <text class="uni-icons">{{unicode}}</text>
+        <text :style="{ color: textColor }" class="uni-icons">{{
+          unicode
+        }}</text>
       </view>
-            <view class="uni-navbar-content" :class="{'is-left':isLeft}">
-                <slot>{{title}}</slot>
+      <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>
@@ -15,61 +19,65 @@
 </template>
 
 <script>
-    import iconpath from './uniicons.ttf'
+  import iconpath from "./uniicons.ttf";
   export default {
     name: "uni-navbar",
     props: {
       title: {
         type: String,
-        		default: ''
+        default: "",
       },
       isLeft: {
         type: Boolean,
-        		default: false
-        	}
+        default: false,
+      },
+      textColor: {
+        type: String,
+        default: "#000",
+      },
     },
     data() {
       return {
-                statusBarHeight: 0
+        statusBarHeight: 0,
       };
     },
     computed: {
       navbarStyle() : string {
-                return `margin-top:${this.statusBarHeight}px`
+        return `margin-top:${this.statusBarHeight}px`;
       },
       unicode() : string {
-                return '\ue600'
-            }
+        return "\ue600";
+      },
     },
     created() {
       uni.loadFontFace({
         global: false,
-                family: 'UniIconsFontFamily',
-                source: "url(" + iconpath + ")",
+        family: "UniIconsFontFamily",
+        source: `url("${iconpath}")`,
         success() { },
         fail(err) {
           console.log(err);
         },
-            })
-            const sys = uni.getSystemInfoSync()
-            const statusBarHeight = sys.statusBarHeight
-            this.statusBarHeight = statusBarHeight
+      });
+      const sys = uni.getSystemInfoSync();
+      const statusBarHeight = sys.statusBarHeight;
+      this.statusBarHeight = statusBarHeight;
     },
     mounted() {
       // TODO 暂时加定时器，否则不生效
       setTimeout(() => {
         uni.setNavigationBarColor({
-                frontColor: '#000000',
-                backgroundColor: '#ffffff'
-            })
-          }, 100)
+          frontColor: "#000000",
+          backgroundColor: "#ffffff",
+        });
+      }, 100);
     },
     methods: {
       back() {
-                uni.navigateBack({})
-            }
+        uni.navigateBack({});
       },
-    }
+    },
+  };
 </script>
 
 <style>
@@ -79,10 +87,12 @@
     font-style: normal;
     color: #333;
   }
+
   .uni-navbar {
     border: 1px #eee solid;
-        background-color: #fff;
+    background-color: #007aff;
   }
+
   .uni-navbar-inner {
     position: relative;
     display: flex;
@@ -112,6 +122,7 @@
     justify-content: center;
     align-items: center;
   }
+
   .is-left {
     justify-content: flex-start;
   }

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>
@@ -9,23 +9,79 @@
         <text class="text">内容：{{item}}</text>
       </view>
       <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>
+  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>