feat(tabbar): add new props placeholder & icon-prefix (#3792)

fix #3445

packages/tabbar-item/index.ts

@@ -6,6 +6,10 @@ VantComponent({
     name: null,
     icon: String,
     dot: Boolean,
+    iconPrefix: {
+      type: String,
+      value: 'van-icon',
+    },
   },
 
   relation: {
@@ -20,9 +24,16 @@ VantComponent({
 
   methods: {
     onClick() {
-      if (this.parent) {
+      const { parent } = this;
-        this.parent.onChange(this);
+      if (parent) {
+        const index = parent.children.indexOf(this);
+        const active = this.data.name || index;
+
+        if (active !== this.data.active) {
+          parent.$emit('change', active);
         }
+      }
+
       this.$emit('click');
     },
 
@@ -36,7 +47,7 @@ VantComponent({
       const parentData = parent.data;
       const { data } = this;
       const active = (data.name || index) === parentData.active;
-      const patch: { [key: string]: any } = {};
+      const patch: Record<string, unknown> = {};
 
       if (active !== data.active) {
         patch.active = active;
@@ -48,9 +59,9 @@ VantComponent({
         patch.inactiveColor = parentData.inactiveColor;
       }
 
-      return Object.keys(patch).length > 0
+      if (Object.keys(patch).length > 0) {
-        ? this.set(patch)
+        this.setData(patch);
-        : Promise.resolve();
+      }
     },
   },
 });

packages/tabbar-item/index.wxml

@@ -3,19 +3,17 @@
 <view
   class="{{ utils.bem('tabbar-item', { active }) }} custom-class"
   style="color: {{ active ? activeColor : inactiveColor }}"
-  bind:tap="onClick"
+  bindtap="onClick"
 >
   <view class="van-tabbar-item__icon">
     <van-icon
       wx:if="{{ icon }}"
       name="{{ icon }}"
+      class-prefix="{{ iconPrefix }}"
       custom-class="van-tabbar-item__icon__inner"
     />
     <block wx:else>
-      <slot
+      <slot wx:if="{{ active }}" name="icon-active" />
-        wx:if="{{ active }}"
-        name="icon-active"
-      />
       <slot wx:else name="icon" />
     </block>
     <van-info

packages/tabbar/README.md

@@ -176,6 +176,7 @@ Page({
 | --- | --- | --- | --- | --- |
 | active | 当前选中标签的索引 | _number_ | - | - |
 | fixed | 是否固定在底部 | _boolean_ | `true` | - |
+| placeholder | 固定在底部时，是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` |
 | border | 是否展示外边框 | _boolean_ | `true` | - |
 | z-index | 元素 z-index | _number_ | `1` | - |
 | active-color | 选中标签的颜色 | _string_ | `#1989fa` | - |
@@ -194,6 +195,7 @@ Page({
 | --- | --- | --- | --- | --- |
 | name | 标签名称，作为匹配的标识符 | _string \| number_ | 当前标签的索引值 | - |
 | icon | 图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - | - |
+| icon-prefix | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/icon#props) | _string_ | `van-icon` |
 | dot | 是否显示小红点 | _boolean_ | - | - |
 | info | 图标右上角提示信息 | _string \| number_ | - | - |
 

packages/tabbar/index.ts

@@ -1,3 +1,4 @@
+import { getRect } from '../common/utils';
 import { VantComponent } from '../common/component';
 
 type TrivialInstance = WechatMiniprogram.Component.TrivialInstance;
@@ -32,6 +33,11 @@ VantComponent({
     fixed: {
       type: Boolean,
       value: true,
+      observer: 'setHeight',
+    },
+    placeholder: {
+      type: Boolean,
+      observer: 'setHeight',
     },
     border: {
       type: Boolean,
@@ -47,25 +53,30 @@ VantComponent({
     },
   },
 
+  data: {
+    height: 50,
+  },
+
   methods: {
     updateChildren() {
       const { children } = this;
       if (!Array.isArray(children) || !children.length) {
-        return Promise.resolve();
+        return;
       }
 
-      return Promise.all(
+      children.forEach((child: TrivialInstance) => child.updateFromParent());
-        children.map((child: TrivialInstance) => child.updateFromParent())
-      );
     },
 
-    onChange(child: TrivialInstance) {
+    setHeight() {
-      const index = this.children.indexOf(child);
+      if (!this.data.fixed || !this.data.placeholder) {
-      const active = child.data.name || index;
+        return;
-
-      if (active !== this.data.active) {
-        this.$emit('change', active);
       }
+
+      wx.nextTick(() => {
+        getRect.call(this, '.van-tabbar').then((res) => {
+          this.setData({ height: res.height });
+        });
+      });
     },
   },
 });

packages/tabbar/index.wxml

@@ -1,8 +1,10 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 
 <view
-  class="custom-class {{ border ? 'van-hairline--top-bottom' : '' }} {{ utils.bem('tabbar', { fixed, safe: safeAreaInsetBottom }) }}"
+  class="{{ border ? 'van-hairline--top-bottom' : '' }} {{ utils.bem('tabbar', { fixed, safe: safeAreaInsetBottom }) }} custom-class"
   style="{{ zIndex ? 'z-index: ' + zIndex : '' }}"
 >
   <slot />
 </view>
+
+<view wx:if="{{ fixed && placeholder }}" style="height: {{ height }}px;"></view>