[improvement] Tabbar: improve performance

fix #1429

packages/tabbar-item/index.ts

@@ -9,7 +9,10 @@ VantComponent({
 
   relation: {
     name: 'tabbar',
-    type: 'ancestor'
+    type: 'ancestor',
+    linked(target: Weapp.Component) {
+      this.parent = target;
+    }
   },
 
   data: {
@@ -18,17 +21,17 @@ VantComponent({
 
   methods: {
     onClick() {
-      const parent = this.getRelationNodes('../tabbar/index')[0];
-      if (parent) {
-        parent.onChange(this);
+      if (this.parent) {
+        this.parent.onChange(this);
       }
       this.$emit('click');
     },
 
-    setActive({ active, color }) {
+    setActive({ active, color }): Promise<void> {
       if (this.data.active !== active) {
-        this.set({ active, color });
+        return this.set({ active, color });
       }
+      return Promise.resolve();
     }
   }
 });

packages/tabbar-item/index.wxml

@@ -1,9 +1,11 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view
-  class="van-tabbar-item custom-class {{ active ? 'van-tabbar-item--active' : '' }}"
+  class="{{ utils.bem('tabbar-item', { active }) }} custom-class"
   style="{{ active && color ? 'color: ' + color : '' }}"
   bind:tap="onClick"
 >
-  <view class="van-tabbar-item__icon {{ dot ? 'van-tabbar-item__icon--dot' : '' }}">
+  <view class="{{ utils.bem('tabbar-item__icon', { dot }) }}">
     <van-icon
       wx:if="{{ icon }}"
       name="{{ icon }}"

packages/tabbar/README.md

@@ -131,10 +131,3 @@ Page({
 |-----------|-----------|
 | icon | 未选中时的图标 |
 | icon-active | 选中时的图标 |
-
-### 更新日志
-
-| 版本 | 类型 | 内容 |
-|-----------|-----------|-----------|
-| 0.1.1 | feature | 新增组件 |
-| 0.2.1 | bugfix | 修复 z-index 不生效的问题 |

packages/tabbar/index.ts

@@ -8,16 +8,14 @@ VantComponent({
     name: 'tabbar-item',
     type: 'descendant',
     linked(target: Weapp.Component) {
-      this.data.items.push(target);
-      setTimeout(() => {
-        this.setActiveItem();
-      });
+      this.children = this.children || [];
+      this.children.push(target);
+      this.setActiveItem();
     },
     unlinked(target: Weapp.Component) {
-      this.data.items = this.data.items.filter(item => item !== target);
-      setTimeout(() => {
-        this.setActiveItem();
-      });
+      this.children = this.children || [];
+      this.children = this.children.filter(item => item !== target);
+      this.setActiveItem();
     }
   },
 
@@ -34,12 +32,8 @@ VantComponent({
     }
   },
 
-  data: {
-    items: []
-  },
-
   watch: {
-    active(active) {
+    active(active: number) {
       this.currentActive = active;
       this.setActiveItem();
     }
@@ -50,21 +44,28 @@ VantComponent({
   },
 
   methods: {
-    setActiveItem() {
-      this.data.items.forEach((item, index) => {
-        item.setActive({
-          active: index === this.currentActive,
-          color: this.data.activeColor
-        });
-      });
+    setActiveItem(): Promise<any> {
+      if (!Array.isArray(this.children) || !this.children.length) {
+        return Promise.resolve();
+      }
+      return Promise.all(
+        this.children.map((item: Weapp.Component, index: number) =>
+          item.setActive({
+            active: index === this.currentActive,
+            color: this.data.activeColor
+          })
+        )
+      );
     },
 
-    onChange(child) {
-      const active = this.data.items.indexOf(child);
+    onChange(child: Weapp.Component) {
+      const active = (this.children || []).indexOf(child);
+
       if (active !== this.currentActive && active !== -1) {
-        this.$emit('change', active);
         this.currentActive = active;
-        this.setActiveItem();
+        this.setActiveItem().then(() => {
+          this.$emit('change', active);
+        });
       }
     }
   }