diff --git a/pages/API/set-navigation-bar-color/set-custom-navigation-bar-color.test.js b/pages/API/set-navigation-bar-color/set-custom-navigation-bar-color.test.js
index 78e2ea174ded707b878bae3f8a9f274f9793587a..54cb43f3fe07110f4b75b8d6b253586bb03bd77a 100644
--- a/pages/API/set-navigation-bar-color/set-custom-navigation-bar-color.test.js
+++ b/pages/API/set-navigation-bar-color/set-custom-navigation-bar-color.test.js
@@ -24,6 +24,8 @@ describe("setCustomNavigationBarColor", () => {
       area: { x: 880, y: 0, width: 100, height: 60 },
     });
     expect(image).toMatchImageSnapshot();
+    const lifeCycleNum = await page.callMethod("getLifeCycleNum");
+    expect(lifeCycleNum - originLifeCycleNum).toBe(2);
   });
 
   it("setNavigationBarColor1", async () => {
@@ -34,5 +36,7 @@ describe("setCustomNavigationBarColor", () => {
       area: { x: 880, y: 0, width: 100, height: 60 },
     });
     expect(image).toMatchImageSnapshot();
+    const lifeCycleNum = await page.callMethod("getLifeCycleNum");
+    expect(lifeCycleNum - originLifeCycleNum).toBe(4);
   });
 });
diff --git a/pages/API/set-navigation-bar-color/set-custom-navigation-bar-color.uvue b/pages/API/set-navigation-bar-color/set-custom-navigation-bar-color.uvue
index dac025f6657c59c6d8354594fe969a577324e887..5ba29c1c43c9a2d0394664d6bf2faac1709dc73b 100644
--- a/pages/API/set-navigation-bar-color/set-custom-navigation-bar-color.uvue
+++ b/pages/API/set-navigation-bar-color/set-custom-navigation-bar-color.uvue
@@ -50,12 +50,15 @@ export default {
         success() {
           this.navigationBarTextColor = '#fff'
           console.log('setNavigationBarColor success')
+          this.setLifeCycleNum(state.lifeCycleNum + 1)
         },
         fail() {
-          console.log('setNavigationBarColor success')
+          console.log('setNavigationBarColor fail')
+          this.setLifeCycleNum(state.lifeCycleNum - 1)
         },
         complete() {
-          console.log('setNavigationBarColor success')
+          console.log('setNavigationBarColor complete')
+          this.setLifeCycleNum(state.lifeCycleNum + 1)
         }
       })
     },
@@ -66,12 +69,15 @@ export default {
         success() {
           this.navigationBarTextColor = '#000'
           console.log('setNavigationBarColor success')
+          this.setLifeCycleNum(state.lifeCycleNum + 1)
         },
         fail() {
-          console.log('setNavigationBarColor success')
+          console.log('setNavigationBarColor fail')
+          this.setLifeCycleNum(state.lifeCycleNum - 1)
         },
         complete() {
-          console.log('setNavigationBarColor success')
+          console.log('setNavigationBarColor complete')
+          this.setLifeCycleNum(state.lifeCycleNum + 1)
         }
       })
     },
diff --git a/pages/API/set-navigation-bar-color/set-navigation-bar-color.test.js b/pages/API/set-navigation-bar-color/set-navigation-bar-color.test.js
index a293b96b61498f6afbb943c7b787affcb1313045..455947abd9aad6a7f347f5d7d3ffa0726ecf6aa0 100644
--- a/pages/API/set-navigation-bar-color/set-navigation-bar-color.test.js
+++ b/pages/API/set-navigation-bar-color/set-navigation-bar-color.test.js
@@ -16,14 +16,18 @@ describe('setNavigationBarColor', () => {
     expect(lifeCycleNum).toBe(originLifeCycleNum)
   })
 
-  it('setNavigationBarColor1', async () => {
-    await page.callMethod('setNavigationBarColor1')
-    const image = await program.screenshot()
-    expect(image).toMatchImageSnapshot()
-  })
-	it('setNavigationBarColor2', async () => {
-	  await page.callMethod('setNavigationBarColor2')
-	  const image = await program.screenshot()
-	  expect(image).toMatchImageSnapshot()
-	})
+  it("setNavigationBarColor1", async () => {
+    await page.callMethod("setNavigationBarColor1");
+    const image = await program.screenshot();
+    expect(image).toMatchImageSnapshot();
+    const lifeCycleNum = await page.callMethod("getLifeCycleNum");
+    expect(lifeCycleNum - originLifeCycleNum).toBe(2);
+  });
+  it("setNavigationBarColor2", async () => {
+    await page.callMethod("setNavigationBarColor2");
+    const image = await program.screenshot();
+    expect(image).toMatchImageSnapshot();
+    const lifeCycleNum = await page.callMethod("getLifeCycleNum");
+    expect(lifeCycleNum - originLifeCycleNum).toBe(4);
+  });
 })
diff --git a/pages/API/set-navigation-bar-color/set-navigation-bar-color.uvue b/pages/API/set-navigation-bar-color/set-navigation-bar-color.uvue
index 913daf0a1c8f9c0d26cbd0c0831207abf84ae9ea..30efdc466659500bd55ac62980043bb890201600 100644
--- a/pages/API/set-navigation-bar-color/set-navigation-bar-color.uvue
+++ b/pages/API/set-navigation-bar-color/set-navigation-bar-color.uvue
@@ -26,12 +26,15 @@ export default {
         backgroundColor: '#00ff00',
         success() {
           console.log('setNavigationBarColor success')
+          this.setLifeCycleNum(state.lifeCycleNum + 1)
         },
         fail() {
-          console.log('setNavigationBarColor success')
+          console.log('setNavigationBarColor fail')
+          this.setLifeCycleNum(state.lifeCycleNum - 1)
         },
         complete() {
-          console.log('setNavigationBarColor success')
+          console.log('setNavigationBarColor complete')
+          this.setLifeCycleNum(state.lifeCycleNum + 1)
         }
       })
     },
@@ -41,12 +44,15 @@ export default {
         backgroundColor: '#ff0000',
         success() {
           console.log('setNavigationBarColor success')
+          this.setLifeCycleNum(state.lifeCycleNum + 1)
         },
         fail() {
-          console.log('setNavigationBarColor success')
+          console.log('setNavigationBarColor fail')
+          this.setLifeCycleNum(state.lifeCycleNum - 1)
         },
         complete() {
-          console.log('setNavigationBarColor success')
+          console.log('setNavigationBarColor complete')
+          this.setLifeCycleNum(state.lifeCycleNum + 1)
         }
       })
     },
@@ -66,12 +72,3 @@ export default {
   },
 }
 </script>
-
-<style>
-.direction-row {
-  flex-direction: row;
-}
-.label {
-  width: 190px;
-}
-</style>