diff --git a/packages/common/style/var.less b/packages/common/style/var.less
index 7867e23e..5d3b65b2 100644
--- a/packages/common/style/var.less
+++ b/packages/common/style/var.less
@@ -294,10 +294,11 @@
 @loading-spinner-animation-duration: 0.8s;
 
 // NavBar
-@nav-bar-height: 44px;
+@nav-bar-height: 46px;
 @nav-bar-background-color: @white;
-@nav-bar-text-color: @blue;
 @nav-bar-arrow-size: 16px;
+@nav-bar-icon-color: @blue;
+@nav-bar-text-color: @blue;
 @nav-bar-title-font-size: @font-size-lg;
 @nav-bar-title-text-color: @text-color;
 
diff --git a/packages/nav-bar/index.less b/packages/nav-bar/index.less
index e11d4b72..b475ad2a 100644
--- a/packages/nav-bar/index.less
+++ b/packages/nav-bar/index.less
@@ -11,6 +11,7 @@
 
   &__content {
     position: relative;
+    height: 100%;
   }
 
   &__text {
@@ -27,8 +28,8 @@
 
   &__arrow {
     vertical-align: middle;
-    .theme(font-size, '@nav-bar-arrow-size');
-    .theme(color, '@nav-bar-text-color');
+    .theme(font-size, '@nav-bar-arrow-size') !important;
+    .theme(color, '@nav-bar-icon-color') !important;
 
     + .van-nav-bar__text {
       margin-left: -20px;
diff --git a/packages/nav-bar/index.ts b/packages/nav-bar/index.ts
index 88c51b5b..a2d4a8fc 100644
--- a/packages/nav-bar/index.ts
+++ b/packages/nav-bar/index.ts
@@ -1,5 +1,5 @@
 import { VantComponent } from '../common/component';
-import { getSystemInfoSync } from '../common/utils';
+import { getRect, getSystemInfoSync } from '../common/utils';
 
 VantComponent({
   classes: ['title-class'],
@@ -33,20 +33,15 @@ VantComponent({
   },
 
   data: {
-    statusBarHeight: 0,
-    height: 44,
-    baseStyle: '',
+    height: 46,
   },
 
   created() {
     const { statusBarHeight } = getSystemInfoSync();
-    const { safeAreaInsetTop, zIndex } = this.data;
-    const paddingTop = safeAreaInsetTop ? statusBarHeight : 0;
-    const baseStyle = `z-index: ${zIndex};padding-top: ${paddingTop}px;`;
+
     this.setData({
       statusBarHeight,
-      height: 44 + statusBarHeight,
-      baseStyle,
+      height: 46 + statusBarHeight,
     });
   },
 
@@ -69,11 +64,9 @@ VantComponent({
       }
 
       wx.nextTick(() => {
-        this.getRect('.van-nav-bar').then(
-          (res: WechatMiniprogram.BoundingClientRectCallbackResult) => {
-            this.setData({ height: res.height });
-          }
-        );
+        getRect.call(this, '.van-nav-bar').then((res) => {
+          this.setData({ height: res.height });
+        });
       });
     },
   },
diff --git a/packages/nav-bar/index.wxml b/packages/nav-bar/index.wxml
index b805f142..b6405fd5 100644
--- a/packages/nav-bar/index.wxml
+++ b/packages/nav-bar/index.wxml
@@ -1,10 +1,11 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <view wx:if="{{ fixed && placeholder }}" style="height: {{ height }}px;" />
 
 <view
   class="{{ utils.bem('nav-bar', { fixed }) }} custom-class {{ border ? 'van-hairline--bottom' : '' }}"
-  style="{{ baseStyle }}; {{ customStyle }}"
+  style="{{ computed.barStyle({ zIndex, statusBarHeight, safeAreaInsetTop }) }}; {{ customStyle }}"
 >
   <view class="van-nav-bar__content">
     <view class="van-nav-bar__left" bind:tap="onClickLeft">
diff --git a/packages/nav-bar/index.wxs b/packages/nav-bar/index.wxs
new file mode 100644
index 00000000..64828328
--- /dev/null
+++ b/packages/nav-bar/index.wxs
@@ -0,0 +1,17 @@
+/* eslint-disable */
+function barStyle(data) {
+  var styles = [
+    ['z-index', data.zIndex],
+    ['padding-top', data.safeAreaInsetTop ? data.statusBarHeight + 'px' : 0],
+  ];
+
+  return styles
+    .map(function (item) {
+      return item.join(':');
+    })
+    .join(';');
+}
+
+module.exports = {
+  barStyle: barStyle,
+};