feat(NavBar): add new prop fill (#2896)

* feat(NavBar): add new prop fill

fix #2887

* refactor(NavBar): rename fill to placeholder

packages/nav-bar/README.md

@@ -56,6 +56,7 @@ Page({
 | right-text | 右侧文案 | *string* | `''` | - |
 | left-arrow | 是否显示左侧箭头 | *boolean* | `false` | - |
 | fixed | 是否固定在顶部 | *boolean* | `false` | - |
+| placeholder | 固定在顶部时是否开启占位 | *boolean* | `false` | - |
 | border | 是否显示下边框 | *boolean* | `true` | - |
 | z-index | 元素 z-index | *number* | `1` | - |
 | safe-area-inset-top | 是否留出顶部安全距离（状态栏高度） | *boolean* | `true` | - |

packages/nav-bar/index.ts

@@ -5,7 +5,14 @@ VantComponent({
 
   props: {
     title: String,
-    fixed: Boolean,
+    fixed: {
+      type: Boolean,
+      observer: 'setHeight'
+    },
+    placeholder: {
+      type: Boolean,
+      observer: 'setHeight'
+    },
     leftText: String,
     rightText: String,
     leftArrow: Boolean,
@@ -20,16 +27,24 @@ VantComponent({
     safeAreaInsetTop: {
       type: Boolean,
       value: true
-    },
+    }
   },
 
   data: {
-    statusBarHeight: 0
+    statusBarHeight: 0,
+    height: 44
   },
 
   created() {
     const { statusBarHeight } = wx.getSystemInfoSync();
-    this.setData({ statusBarHeight });
+    this.setData({
+      statusBarHeight,
+      height: 44 + statusBarHeight
+    });
+  },
+
+  mounted() {
+    this.setHeight();
   },
 
   methods: {
@@ -39,6 +54,20 @@ VantComponent({
 
     onClickRight() {
       this.$emit('click-right');
+    },
+
+    setHeight() {
+      if (!this.data.fixed || !this.data.placeholder) {
+        return;
+      }
+
+      wx.nextTick(() => {
+        this.getRect('.van-nav-bar').then(
+          (res: WechatMiniprogram.BoundingClientRectCallbackResult) => {
+            this.setData({ height: res.height });
+          }
+        );
+      });
     }
   }
 });

packages/nav-bar/index.wxml

@@ -1,5 +1,7 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 
+<view wx:if="{{ fixed && placeholder }}" style="height: {{ height }}px;" />
+
 <view
   class="{{ utils.bem('nav-bar', { fixed }) }} custom-class {{ border ? 'van-hairline--bottom' : '' }}"
   style="z-index: {{ zIndex }}; padding-top: {{ safeAreaInsetTop ? statusBarHeight : 0 }}px;"