diff --git a/packages/nav-bar/index.ts b/packages/nav-bar/index.ts
index 82225680..3386e2f2 100644
--- a/packages/nav-bar/index.ts
+++ b/packages/nav-bar/index.ts
@@ -15,6 +15,7 @@ VantComponent({
     },
     leftText: String,
     rightText: String,
+    customStyle: String,
     leftArrow: Boolean,
     border: {
       type: Boolean,
@@ -33,13 +34,18 @@ VantComponent({
   data: {
     statusBarHeight: 0,
     height: 44,
+    baseStyle: '',
   },
 
   created() {
     const { statusBarHeight } = wx.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
     });
   },
 
diff --git a/packages/nav-bar/index.wxml b/packages/nav-bar/index.wxml
index 9bc58bcb..941bf563 100644
--- a/packages/nav-bar/index.wxml
+++ b/packages/nav-bar/index.wxml
@@ -4,7 +4,7 @@
 
 <view
   class="{{ utils.bem('nav-bar', { fixed }) }} custom-class {{ border ? 'van-hairline--bottom' : '' }}"
-  style="z-index: {{ zIndex }}; padding-top: {{ safeAreaInsetTop ? statusBarHeight : 0 }}px;"
+  style="{{ baseStyle }} {{ customStyle }}"
 >
   <view class="van-nav-bar__left" bind:tap="onClickLeft">
     <block wx:if="{{ leftArrow || leftText }}">