[new feature] TabBar: improve performance & add new props & improve doc (#1722)

fix #1625

pull request 改动点:

- 重构组件，优化性能
- 新增 inactiveColor、name 属性
- 完善文档，增加小程序自定义tab-bar示例

example/app.json

@@ -1,4 +1,18 @@
 {
+  "tabBar": {
+    "custom": true,
+    "color": "#000000",
+    "selectedColor": "#000000",
+    "backgroundColor": "#000000",
+    "list": [
+      {
+        "pagePath": "pages/tabbar/index"
+      },
+      {
+        "pagePath": "pages/tabbar1/index"
+      }
+    ]
+  },
   "pages": [
     "pages/dashboard/index",
     "pages/action-sheet/index",
@@ -25,6 +39,7 @@
     "pages/slider/index",
     "pages/tab/index",
     "pages/tabbar/index",
+    "pages/tabbar1/index",
     "pages/tag/index",
     "pages/toast/index",
     "pages/transition/index",
@@ -99,4 +114,4 @@
     "van-picker": "../../dist/picker/index"
   },
   "sitemapLocation": "sitemap.json"
-}
+}

example/custom-tab-bar/index.js

@@ -0,0 +1,33 @@
+Component({
+  data: {
+    active: 0,
+    list: [
+      {
+        icon: 'home-o',
+        text: 'tabbar示例1',
+        url: '/pages/tabbar/index'
+      },
+      {
+        icon: 'search',
+        text: 'tabbar示例2',
+        url: '/pages/tabbar1/index'
+      }
+    ]
+  },
+
+  methods: {
+    onChange(event) {
+      this.setData({ active: event.detail });
+      wx.switchTab({
+        url: this.data.list[event.detail].url
+      });
+    },
+
+    init() {
+      const page = getCurrentPages().pop();
+      this.setData({
+        active: this.data.list.findIndex(item => item.url === `/${page.route}`)
+      });
+    }
+  }
+});

example/custom-tab-bar/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-tabbar": "../dist/tabbar/index",
+    "van-tabbar-item": "../dist/tabbar-item/index"
+  }
+}

example/custom-tab-bar/index.wxml

@@ -0,0 +1,5 @@
+<van-tabbar active="{{ active }}" bind:change="onChange">
+  <van-tabbar-item wx:for="{{ list }}" wx:key="index" icon="{{ item.icon }}">{{
+    item.text
+  }}</van-tabbar-item>
+</van-tabbar>

example/pages/dashboard/index.js

@@ -11,5 +11,12 @@ Page({
     this.setData({
       activeNames: event.detail
     });
+  },
+
+  onClick(event) {
+    const { switchTab, url } = event.currentTarget.dataset;
+    if (switchTab) {
+      wx.switchTab({ url });
+    }
   }
 });

example/pages/dashboard/index.wxml

@@ -32,7 +32,10 @@
         wx:key="item.title"
         is-link
         url="/pages{{ item.path }}/index"
+        data-url="/pages{{ item.path }}/index"
+        data-switch-tab="{{ true }}"
         title="{{ item.title }}"
+        bind:click="onClick"
       />
     </van-collapse-item>
   </van-collapse>

example/pages/tabbar/index.js

@@ -3,16 +3,16 @@ import Page from '../../common/page';
 Page({
   data: {
     active: 0,
-    active2: 0,
+    active2: 'home',
-    icon: {
+    active3: 0
-      normal:
+  },
-        'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
+
-      active:
+  onShow() {
-        'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
+    this.getTabBar().init();
-    }
   },
 
   onChange(event) {
-    console.log(event.detail);
+    const { key } = event.currentTarget.dataset;
+    this.setData({ [key]: event.detail });
   }
 });

example/pages/tabbar/index.wxml

@@ -1,6 +1,37 @@
 <demo-block title="基础用法">
   <van-tabbar
     active="{{ active }}"
+    data-key="active"
+    custom-class="tabbar"
+    safe-area-inset-bottom="{{ false }}"
+    bind:change="onChange"
+  >
+    <van-tabbar-item icon="home-o">标签</van-tabbar-item>
+    <van-tabbar-item icon="search">标签</van-tabbar-item>
+    <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
+    <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
+  </van-tabbar>
+</demo-block>
+
+<demo-block title="通过名称匹配">
+  <van-tabbar
+    active="{{ active2 }}"
+    data-key="active2"
+    custom-class="tabbar"
+    safe-area-inset-bottom="{{ false }}"
+    bind:change="onChange"
+  >
+    <van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>
+    <van-tabbar-item name="search" icon="search">标签</van-tabbar-item>
+    <van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>
+    <van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>
+  </van-tabbar>
+</demo-block>
+
+<demo-block title="显示徽标">
+  <van-tabbar
+    active="{{ active3 }}"
+    data-key="active3"
     custom-class="tabbar"
     safe-area-inset-bottom="{{ false }}"
     bind:change="onChange"
@@ -11,43 +42,3 @@
     <van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>
   </van-tabbar>
 </demo-block>
-
-<demo-block title="自定义图标">
-  <van-tabbar
-    active="{{ active2 }}"
-    custom-class="tabbar"
-    safe-area-inset-bottom="{{ false }}"
-    bind:change="onChange"
-  >
-    <van-tabbar-item info="3">
-      <image
-        slot="icon"
-        src="{{ icon.normal }}"
-        mode="aspectFit"
-      />
-      <image
-        slot="icon-active"
-        src="{{ icon.active }}"
-        mode="aspectFit"
-      />
-      自定义
-    </van-tabbar-item>
-    <van-tabbar-item icon="search">标签</van-tabbar-item>
-    <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
-  </van-tabbar>
-</demo-block>
-
-<demo-block title="自定义颜色">
-  <van-tabbar
-    active="{{ active }}"
-    custom-class="tabbar"
-    safe-area-inset-bottom="{{ false }}"
-    active-color="#07c160"
-    bind:change="onChange"
-  >
-    <van-tabbar-item icon="home-o">标签</van-tabbar-item>
-    <van-tabbar-item icon="search">标签</van-tabbar-item>
-    <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
-    <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
-  </van-tabbar>
-</demo-block>

example/pages/tabbar1/index.js

@@ -0,0 +1,23 @@
+import Page from '../../common/page';
+
+Page({
+  data: {
+    active: 0,
+    active2: 0,
+    icon: {
+      normal:
+        'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
+      active:
+        'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
+    }
+  },
+
+  onShow() {
+    this.getTabBar().init();
+  },
+
+  onChange(event) {
+    const { key } = event.currentTarget.dataset;
+    this.setData({ [key]: event.detail });
+  }
+});

example/pages/tabbar1/index.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "Tabbar 标签栏"
+}

example/pages/tabbar1/index.wxml

@@ -0,0 +1,43 @@
+
+<demo-block title="自定义图标">
+  <van-tabbar
+    active="{{ active2 }}"
+    data-key="active2"
+    custom-class="tabbar"
+    safe-area-inset-bottom="{{ false }}"
+    bind:change="onChange"
+  >
+    <van-tabbar-item info="3">
+      <image
+        slot="icon"
+        src="{{ icon.normal }}"
+        mode="aspectFit"
+      />
+      <image
+        slot="icon-active"
+        src="{{ icon.active }}"
+        mode="aspectFit"
+      />
+      自定义
+    </van-tabbar-item>
+    <van-tabbar-item icon="search">标签</van-tabbar-item>
+    <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
+  </van-tabbar>
+</demo-block>
+
+<demo-block title="自定义颜色">
+  <van-tabbar
+    active="{{ active }}"
+    data-key="active"
+    custom-class="tabbar"
+    safe-area-inset-bottom="{{ false }}"
+    active-color="#07c160"
+    inactive-color="#000"
+    bind:change="onChange"
+  >
+    <van-tabbar-item icon="home-o">标签</van-tabbar-item>
+    <van-tabbar-item icon="search">标签</van-tabbar-item>
+    <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
+    <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
+  </van-tabbar>
+</demo-block>

example/pages/tabbar1/index.wxss

@@ -0,0 +1,3 @@
+.tabbar {
+  position: relative !important;
+}

packages/tabbar-item/index.ts

@@ -4,15 +4,15 @@ VantComponent({
   props: {
     info: null,
     icon: String,
-    dot: Boolean
+    dot: Boolean,
+    name: {
+      type: [String, Number]
+    }
   },
 
   relation: {
     name: 'tabbar',
-    type: 'ancestor',
+    type: 'ancestor'
-    linked(target: Weapp.Component) {
-      this.parent = target;
-    }
   },
 
   data: {
@@ -27,11 +27,31 @@ VantComponent({
       this.$emit('click');
     },
 
-    setActive({ active, color }): Promise<void> {
+    updateFromParent() {
-      if (this.data.active !== active) {
+      const { parent } = this;
-        return this.set({ active, color });
+      if (!parent) {
+        return;
       }
-      return Promise.resolve();
+
+      const index = parent.children.indexOf(this);
+      const parentData = parent.data;
+      const { data } = this;
+      const active = (data.name || index) === parentData.active;
+      const patch: { [key: string]: any } = {};
+
+      if (active !== data.active) {
+        patch.active = active;
+      }
+      if (parentData.activeColor !== data.activeColor) {
+        patch.activeColor = parentData.activeColor;
+      }
+      if (parentData.inactiveColor !== data.inactiveColor) {
+        patch.inactiveColor = parentData.inactiveColor;
+      }
+
+      return Object.keys(patch).length > 0
+        ? this.set(patch)
+        : Promise.resolve();
     }
   }
 });

packages/tabbar-item/index.wxml

@@ -2,7 +2,7 @@
 
 <view
   class="{{ utils.bem('tabbar-item', { active }) }} custom-class"
-  style="{{ active && color ? 'color: ' + color : '' }}"
+  style="color: {{ active ? activeColor : inactiveColor }}"
   bind:tap="onClick"
 >
   <view class="{{ utils.bem('tabbar-item__icon', { dot }) }}">

packages/tabbar/README.md

@@ -17,9 +17,9 @@
 ```html
 <van-tabbar active="{{ active }}" bind:change="onChange">
   <van-tabbar-item icon="home-o">标签</van-tabbar-item>
-  <van-tabbar-item icon="search" dot>标签</van-tabbar-item>
+  <van-tabbar-item icon="search">标签</van-tabbar-item>
-  <van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>
+  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
-  <van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>
+  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
 </van-tabbar>
 ```
 
@@ -35,6 +35,41 @@ Page({
 });
 ```
 
+### 通过名称匹配
+
+在标签指定`name`属性的情况下，`v-model`的值为当前标签的`name`
+
+```html
+<van-tabbar active="{{ active }}" bind:change="onChange">
+  <van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>
+  <van-tabbar-item name="search" icon="search">标签</van-tabbar-item>
+  <van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>
+  <van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>
+</van-tabbar>
+```
+
+```javascript
+Page({
+  data: {
+    active: 'home'
+  },
+  onChange(event) {
+    console.log(event.detail);
+  }
+});
+```
+
+### 显示徽标
+
+```html
+<van-tabbar active="{{ active }}" bind:change="onChange">
+  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
+  <van-tabbar-item icon="search" dot>标签</van-tabbar-item>
+  <van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>
+  <van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>
+</van-tabbar>
+```
+
 ### 自定义图标
 
 可以通过 slot 自定义图标，其中 icon slot 代表未选中状态下的图标，icon-active slot 代表选中状态下的图标
@@ -81,6 +116,7 @@ Page({
 <van-tabbar
   active="{{ active }}"
   active-color="#07c160"
+  inactive-color="#000"
   bind:change="onChange"
 >
   <van-tabbar-item icon="home-o">标签</van-tabbar-item>
@@ -102,27 +138,33 @@ Page({
 });
 ```
 
+### 结合自定义 tabBar
+
+请参考 [微信官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html) 与 [代码片段](https://developers.weixin.qq.com/s/FjLU4mmp7r9s)
+
 ### Tabbar API
 
 | 参数 | 说明 | 类型 | 默认值 |
 |-----------|-----------|-----------|-------------|
 | active | 当前选中标签的索引 | `Number` | - |
-| active-color | 选中标签的颜色 | `String` | `#1989fa` |
 | fixed | 是否固定在底部 | `Boolean` | `true` |
 | border | 是否展示外边框 | `Boolean` | `true` |
 | z-index | 元素 z-index | `Number` | `1` |
+| active-color | 选中标签的颜色 | `String` | `#1989fa` |
+| inactive-color | 未选中标签的颜色 | `String` | `#7d7e80` |
 | safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | `Boolean` | `true` |
 
 ### Tabbar Event
 
 | 事件名 | 说明 | 参数 |
 |-----------|-----------|-----------|
-| bind:change | 切换标签时触发 | event.detail: 当前选中标签的索引 |
+| bind:change | 切换标签时触发 | event.detail: 当前选中标签的名称或索引值 |
 
 ### TabbarItem API
 
 | 参数 | 说明 | 类型 | 默认值 |
 |-----------|-----------|-----------|-----------|
+| name | 标签名称，作为匹配的标识符 | `String | Number` | 当前标签的索引值 |
 | icon | 图标名称或图片链接，可选值见 Icon 组件 | `String` | - |
 | dot | 是否显示小红点 | `Boolean` | - |
 | info | 图标右上角提示信息 | `String | Number` | - |

packages/tabbar/index.ts

@@ -8,20 +8,31 @@ VantComponent({
     name: 'tabbar-item',
     type: 'descendant',
     linked(target: Weapp.Component) {
-      this.children = this.children || [];
       this.children.push(target);
-      this.setActiveItem();
+      target.parent = this;
+      target.updateFromParent();
     },
     unlinked(target: Weapp.Component) {
-      this.children = this.children || [];
+      this.children = this.children.filter(
-      this.children = this.children.filter(item => item !== target);
+        (item: Weapp.Component) => item !== target
-      this.setActiveItem();
+      );
+      this.updateChildren();
     }
   },
 
   props: {
-    active: Number,
+    active: {
-    activeColor: String,
+      type: [Number, String],
+      observer: 'updateChildren'
+    },
+    activeColor: {
+      type: String,
+      observer: 'updateChildren'
+    },
+    inactiveColor: {
+      type: String,
+      observer: 'updateChildren'
+    },
     fixed: {
       type: Boolean,
       value: true
@@ -36,40 +47,28 @@ VantComponent({
     }
   },
 
-  watch: {
+  beforeCreate() {
-    active(active: number) {
+    this.children = [];
-      this.currentActive = active;
-      this.setActiveItem();
-    }
-  },
-
-  created() {
-    this.currentActive = this.data.active;
   },
 
   methods: {
-    setActiveItem(): Promise<any> {
+    updateChildren() {
-      if (!Array.isArray(this.children) || !this.children.length) {
+      const { children } = this;
+      if (!Array.isArray(children) || !children.length) {
         return Promise.resolve();
       }
+
       return Promise.all(
-        this.children.map((item: Weapp.Component, index: number) =>
+        children.map((child: Weapp.Component) => child.updateFromParent())
-          item.setActive({
-            active: index === this.currentActive,
-            color: this.data.activeColor
-          })
-        )
       );
     },
 
     onChange(child: Weapp.Component) {
-      const active = (this.children || []).indexOf(child);
+      const index = this.children.indexOf(child);
+      const active = child.data.name || index;
 
-      if (active !== this.currentActive && active !== -1) {
+      if (active !== this.data.active) {
-        this.currentActive = active;
+        this.$emit('change', active);
-        this.setActiveItem().then(() => {
-          this.$emit('change', active);
-        });
       }
     }
   }