feat(setNavigationBarColor): 不同平台跳转对应自定义导航栏示例

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

-<template>
-  <page-head title="setNavigationBarColor"></page-head>
-  <view class="uni-padding-wrap uni-common-mt">
-    <button @tap="setNavigationBarColor1" class="uni-btn">
-      设置导航条背景绿色，标题白色
-    </button>
-    <button @tap="setNavigationBarColor2" class="uni-btn">
-      设置导航条背景红色，标题黑色
-    </button>
-    <button @tap="goNavbarLite" class="uni-btn">
-      跳转自定义导航栏页面
-    </button>
-    <button @tap="goCustomNavigation" class="uni-btn">
-      跳转设置状态栏页面
-    </button>
-  </view>
-</template>
-
-<script>
-  import { state, setLifeCycleNum } from '@/store/index.uts'
-
-  export default {
-    methods: {
-      setNavigationBarColor1() {
-        uni.setNavigationBarColor({
-          frontColor: '#ffffff',
-          backgroundColor: '#00ff00',
-          success: () => {
-            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: '#ff0000',
-          success: () => {
-            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)
-      },
-      goNavbarLite() {
-        uni.navigateTo({
-          url: '/pages/template/navbar-lite/navbar-lite'
-        })
-      },
-      goCustomNavigation(){
-        uni.navigateTo({
-          url: '/pages/API/set-navigation-bar-color/set-navigation-bar-color-custom-navigation'
-        })
-      }
-    },
-  }
+<template>
+  <page-head title="setNavigationBarColor"></page-head>
+  <view class="uni-padding-wrap uni-common-mt">
+    <button @tap="setNavigationBarColor1" class="uni-btn">
+      设置导航条背景绿色，标题白色
+    </button>
+    <button @tap="setNavigationBarColor2" class="uni-btn">
+      设置导航条背景红色，标题黑色
+    </button>
+    <!-- #ifdef WEB -->
+    <button @tap="goNavbarLite" class="uni-btn">
+      跳转自定义导航栏页面
+    </button>
+    <!-- #endif -->
+    <!-- #ifdef APP -->
+    <button @tap="goCustomNavigation" class="uni-btn">
+      跳转设置状态栏页面
+    </button>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script>
+  import { state, setLifeCycleNum } from '@/store/index.uts'
+
+  export default {
+    methods: {
+      setNavigationBarColor1() {
+        uni.setNavigationBarColor({
+          frontColor: '#ffffff',
+          backgroundColor: '#00ff00',
+          success: () => {
+            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: '#ff0000',
+          success: () => {
+            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)
+      },
+      goNavbarLite() {
+        uni.navigateTo({
+          url: '/pages/template/navbar-lite/navbar-lite'
+        })
+      },
+      goCustomNavigation() {
+        uni.navigateTo({
+          url: '/pages/API/set-navigation-bar-color/set-navigation-bar-color-custom-navigation'
+        })
+      }
+    },
+  }
 </script>