feat(Tab): add new prop lazyRender & improve performance (#2328)

Tab

add new prop lazyRender
improve performace
Sticky

add new prop container

example/pages/sticky/index.js

@@ -1,5 +1,13 @@
 import Page from '../../common/page';
 
 Page({
-  data: {}
+  data: {
+    container: null
+  },
+
+  onReady() {
+    this.setData({
+      container: () => wx.createSelectorQuery().select('#container')
+    });
+  }
 });

example/pages/sticky/index.wxml

@@ -1,6 +1,6 @@
 <demo-block title="基础用法">
   <van-sticky>
-    <van-button type="primary" style="margin-left: 15px">
+    <van-button type="primary" custom-style="margin-left: 15px">
       基础用法
     </van-button>
   </van-sticky>
@@ -8,8 +8,18 @@
 
 <demo-block title="吸顶距离">
   <van-sticky offset-top="{{ 50 }}">
-    <van-button type="info" style="margin-left: 115px">
+    <van-button type="info" custom-style="margin-left: 115px">
       吸顶距离
     </van-button>
   </van-sticky>
 </demo-block>
+
+<demo-block title="指定容器">
+  <view id="container" style="height: 150px; background-color: #fff;">
+    <van-sticky container="{{ container }}">
+      <van-button type="warning" custom-style="margin-left: 215px;">
+        指定容器
+      </van-button>
+    </van-sticky>
+  </view>
+</demo-block>

example/pages/tab/index.js

@@ -13,14 +13,14 @@ Page({
 
   onClickDisabled(event) {
     wx.showToast({
-      title: `标签 ${event.detail.name} 已被禁用`,
+      title: `标签 ${event.detail.index + 1} 已被禁用`,
       icon: 'none'
     });
   },
 
   onChange(event) {
     wx.showToast({
-      title: `切换到标签 ${event.detail.name}`,
+      title: `切换到标签 ${event.detail.index + 1}`,
       icon: 'none'
     });
   },
@@ -34,7 +34,7 @@ Page({
 
   onClick(event) {
     wx.showToast({
-      title: `点击标签 ${event.detail.name}`,
+      title: `点击标签 ${event.detail.index + 1}`,
       icon: 'none'
     });
   }

packages/sticky/README.md

@@ -36,6 +36,34 @@ Sticky 组件与 CSS 中`position: sticky`属性实现的效果一致，当组
 </van-sticky>
 ```
 
+### 指定容器
+
+通过`container`属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置
+
+```html
+<view id="container" style="height: 150px;">
+  <van-sticky container="{{ container }}">
+    <van-button type="warning">
+      指定容器
+    </van-button>
+  </van-sticky>
+</view>
+```
+
+```js
+Page({
+  data: {
+    container: null
+  },
+
+  onReady() {
+    this.setData({
+      container: () => wx.createSelectorQuery().select('#container')
+    });
+  }
+});
+```
+
 ## API
 
 ### Props
@@ -44,6 +72,7 @@ Sticky 组件与 CSS 中`position: sticky`属性实现的效果一致，当组
 |-----------|-----------|-----------|-------------|
 | offset-top | 吸顶时与顶部的距离，单位`px` | *number* | `0` |
 | z-index | 吸顶时的 z-index | *number* | `99` |
+| container | 一个函数，返回容器对应的 NodesRef 节点 | *function* | - |
 
 ### Events
 

packages/sticky/index.ts

@@ -1,5 +1,7 @@
 import { VantComponent } from '../common/component';
 
+const ROOT_ELEMENT = '.van-sticky';
+
 VantComponent({
   props: {
     zIndex: {
@@ -8,9 +10,28 @@ VantComponent({
     },
     offsetTop: {
       type: Number,
-      value: 0
+      value: 0,
+      observer: 'observeContent'
     },
-    disabled: Boolean
+    disabled: {
+      type: Boolean,
+      observer(value) {
+        if (!this.mounted) {
+          return;
+        }
+        value ? this.disconnectObserver() : this.initObserver();
+      }
+    },
+    container: {
+      type: null,
+      observer(target: () => WechatMiniprogram.NodesRef) {
+        if (typeof target !== 'function' || !this.data.height) {
+          return;
+        }
+
+        this.observeContainer();
+      }
+    }
   },
 
   data: {
@@ -35,43 +56,120 @@ VantComponent({
       }
     },
 
-    observerContentScroll() {
-      const { offsetTop } = this.data;
-      const intersectionObserver = this.createIntersectionObserver({
-        thresholds: [0, 1]
-      });
-      this.intersectionObserver = intersectionObserver;
-      intersectionObserver.relativeToViewport({ top: -offsetTop });
-      intersectionObserver.observe(
-        '.van-sticky',
-        (res) => {
-          if (this.data.disabled) {
-            return;
-          }
-          // @ts-ignore
-          const { top, height } = res.boundingClientRect;
-          const fixed = top <= offsetTop;
+    getContainerRect() {
+      const nodesRef: WechatMiniprogram.NodesRef = this.data.container();
 
-          this.$emit('scroll', {
-            scrollTop: top,
-            isFixed: fixed
-          });
+      return new Promise(resolve =>
+        nodesRef.boundingClientRect(resolve).exec()
+      );
+    },
 
-          this.setData({ fixed, height });
+    initObserver() {
+      this.disconnectObserver();
+
+      this.getRect(ROOT_ELEMENT).then(
+        (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
+          this.setData({ height: rect.height });
 
           wx.nextTick(() => {
-            this.setStyle();
+            this.observeContent();
+            this.observeContainer();
           });
         }
       );
+    },
+
+    disconnectObserver(observerName?: string) {
+      if (observerName) {
+        const observer: WechatMiniprogram.IntersectionObserver = this[
+          observerName
+        ];
+        observer && observer.disconnect();
+      } else {
+        this.contentObserver && this.contentObserver.disconnect();
+        this.containerObserver && this.containerObserver.disconnect();
+      }
+    },
+
+    observeContent() {
+      const { offsetTop } = this.data;
+
+      this.disconnectObserver('contentObserver');
+      const contentObserver = this.createIntersectionObserver({
+        thresholds: [0, 1]
+      });
+      this.contentObserver = contentObserver;
+      contentObserver.relativeToViewport({ top: -offsetTop });
+      contentObserver.observe(ROOT_ELEMENT, res => {
+        if (this.data.disabled) {
+          return;
+        }
+
+        this.setFixed(res.boundingClientRect.top);
+      });
+    },
+
+    observeContainer() {
+      if (typeof this.data.container !== 'function') {
+        return;
+      }
+
+      const { height } = this.data;
+
+      this.getContainerRect().then(
+        (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
+          this.containerHeight = rect.height;
+
+          this.disconnectObserver('containerObserver');
+          const containerObserver = this.createIntersectionObserver({
+            thresholds: [0, 1]
+          });
+          this.containerObserver = containerObserver;
+          containerObserver.relativeToViewport({
+            top: this.containerHeight - height
+          });
+          containerObserver.observe(ROOT_ELEMENT, res => {
+            if (this.data.disabled) {
+              return;
+            }
+
+            this.setFixed(res.boundingClientRect.top);
+          });
+        }
+      );
+    },
+
+    setFixed(top) {
+      const { offsetTop, height } = this.data;
+      const { containerHeight } = this;
+
+      const fixed =
+        containerHeight && height
+          ? top > height - containerHeight && top < offsetTop
+          : top < offsetTop;
+
+      this.$emit('scroll', {
+        scrollTop: top,
+        isFixed: fixed
+      });
+
+      this.setData({ fixed });
+
+      wx.nextTick(() => {
+        this.setStyle();
+      });
     }
   },
 
   mounted() {
-    this.observerContentScroll();
+    this.mounted = true;
+
+    if (!this.data.disabled) {
+      this.initObserver();
+    }
   },
 
   destroyed() {
-    this.intersectionObserver.disconnect();
+    this.disconnectObserver();
   }
 });

packages/sticky/index.wxml

@@ -1,6 +1,6 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 
-<view class="custom-class van-sticky }}" style="{{ containerStyle }}">
+<view class="custom-class van-sticky" style="{{ containerStyle }}">
   <view class="{{ utils.bem('sticky-wrap', { fixed }) }}" style="{{ wrapStyle }}">
     <slot />
   </view>

packages/tab/README.md

@@ -180,8 +180,9 @@ Page({
 | line-height | 底部条高度 (px) | *string \| number* | `3px` | - |
 | swipe-threshold | 滚动阈值，设置标签数量超过多少个可滚动 | *number* | `4` | - |
 | animated | 是否使用动画切换 Tabs | *boolean* | `false` | - |
-| swipeable | 是否开启手势滑动切换 | *boolean* | `false` | - |
 | sticky | 是否使用粘性定位布局 | *boolean* | `false` | - |
+| swipeable | 是否开启手势滑动切换 | *boolean* | `false` | - |
+| lazy-render | 是否开启标签页内容延迟渲染 | *boolean* | `true` | - |
 
 ### Tab Props
 

packages/tab/index.less

@@ -1,3 +1,9 @@
+:host {
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: 100%;
+}
+
 .van-tab__pane {
   box-sizing: border-box;
   overflow-y: auto;

packages/tab/index.ts

@@ -25,10 +25,7 @@ VantComponent({
   },
 
   data: {
-    width: null,
-    inited: false,
-    active: false,
-    animated: false
+    active: false
   },
 
   watch: {
@@ -40,10 +37,6 @@ VantComponent({
   },
 
   methods: {
-    setComputedName() {
-      this.computedName = this.data.name || this.index;
-    },
-
     getComputedName() {
       if (this.data.name !== '') {
         return this.data.name;
@@ -51,6 +44,17 @@ VantComponent({
       return this.index;
     },
 
+    updateRender(active, parent) {
+      const { data: parentData } = parent;
+
+      this.inited = this.inited || active;
+      this.setData({
+        active,
+        shouldRender: this.inited || !parentData.lazyRender,
+        shouldShow: active || parentData.animated
+      });
+    },
+
     update() {
       if (this.parent) {
         this.parent.updateTabs();

packages/tab/index.wxml

@@ -1,9 +1,9 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 
 <view
-  wx:if="{{ animated || inited }}"
+  wx:if="{{ shouldRender }}"
   class="custom-class {{ utils.bem('tab__pane', { active, inactive: !active }) }}"
-  style="{{ animated || active ? '' : 'display: none;' }} {{ width ? 'width:' + width + 'px;' : '' }}"
+  style="{{ shouldShow ? '' : 'display: none;' }}"
 >
   <slot />
 </view>

packages/tabs/index.less

@@ -73,6 +73,10 @@
 
   &__track {
     position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    transition-property: transform;
   }
 
   &__content {

packages/tabs/index.ts

@@ -1,15 +1,9 @@
 import { VantComponent } from '../common/component';
 import { touch } from '../mixins/touch';
 import { Weapp } from 'definitions/weapp';
-import { nextTick, isDef, addUnit } from '../common/utils';
+import { isDef, addUnit } from '../common/utils';
 
-type TabItemData = {
-  width?: number;
-  active: boolean;
-  inited?: boolean;
-  animated?: boolean;
-  name?: string | number;
-};
+type TrivialInstance = WechatMiniprogram.Component.TrivialInstance;
 
 VantComponent({
   mixins: [touch],
@@ -19,25 +13,19 @@ VantComponent({
   relation: {
     name: 'tab',
     type: 'descendant',
-    linked(child) {
-      child.index = this.children.length;
-      this.children.push(child);
-      this.updateTabs(this.data.tabs.concat(child.data));
+    linked(target) {
+      target.index = this.children.length;
+      this.children.push(target);
+      this.updateTabs();
     },
-    unlinked(child) {
-      const index = this.children.indexOf(child);
-      const { tabs } = this.data;
-      tabs.splice(index, 1);
-      this.children.splice(index, 1);
-
-      let i = index;
-      while (i >= 0 && i < this.children.length) {
-        const currentChild = this.children[i];
-        currentChild.index--;
-        i++;
-      }
-
-      this.updateTabs(tabs);
+    unlinked(target) {
+      this.children = this.children
+        .filter((child: TrivialInstance) => child !== target)
+        .map((child: TrivialInstance, index: number) => {
+          child.index = index;
+          return child;
+        });
+      this.updateTabs();
     }
   },
 
@@ -65,9 +53,10 @@ VantComponent({
     active: {
       type: [String, Number],
       value: 0,
-      observer(value) {
-        this.currentName = value;
-        this.setActiveTab();
+      observer(name) {
+        if (name !== this.getCurrentName()) {
+          this.setCurrentIndexByName(name);
+        }
       }
     },
     type: {
@@ -78,6 +67,10 @@ VantComponent({
       type: Boolean,
       value: true
     },
+    ellipsis: {
+      type: Boolean,
+      value: true
+    },
     duration: {
       type: Number,
       value: 0.3
@@ -89,16 +82,20 @@ VantComponent({
     swipeThreshold: {
       type: Number,
       value: 4,
-      observer() {
+      observer(value) {
         this.setData({
-          scrollable: this.children.length > this.data.swipeThreshold
+          scrollable: this.children.length > value
         });
       }
     },
     offsetTop: {
       type: Number,
       value: 0
-    }
+    },
+    lazyRender: {
+      type: Boolean,
+      value: true
+    },
   },
 
   data: {
@@ -107,9 +104,8 @@ VantComponent({
     scrollLeft: 0,
     scrollable: false,
     trackStyle: '',
-    wrapStyle: '',
-    position: '',
-    currentIndex: 0
+    currentIndex: null,
+    container: null
   },
 
   beforeCreate() {
@@ -117,48 +113,100 @@ VantComponent({
   },
 
   mounted() {
+    this.setData({
+      container: () => this.createSelectorQuery().select('.van-tabs')
+    });
     this.setLine(true);
     this.setTrack();
     this.scrollIntoView();
   },
 
   methods: {
-    updateTabs(tabs: TabItemData[]) {
-      tabs = tabs || this.data.tabs;
+    updateTabs() {
+      const { children = [], data } = this;
       this.setData({
-        tabs,
-        scrollable: tabs.length > this.data.swipeThreshold
+        tabs: children.map((child: TrivialInstance) => child.data),
+        scrollable: children.length > data.swipeThreshold
       });
-      this.setActiveTab();
+
+      this.setCurrentIndexByName(this.getCurrentName() || data.active);
     },
 
-    trigger(eventName: string, name: string | number) {
-      const { tabs, currentIndex } = this.data;
+    trigger(eventName: string) {
+      const { currentIndex } = this.data;
+
+      const child = this.children[currentIndex];
 
       this.$emit(eventName, {
-        name,
-        title: tabs[currentIndex].title
+        index: currentIndex,
+        name: child.getComputedName(),
+        title: child.data.title
       });
     },
 
     onTap(event: Weapp.Event) {
       const { index } = event.currentTarget.dataset;
       const child = this.children[index];
-      const computedName = child.getComputedName();
 
-      if (this.data.tabs[index].disabled) {
-        this.trigger('disabled', computedName);
+      if (child.data.disabled) {
+        this.trigger('disabled');
       } else {
-        this.trigger('click', computedName);
-        this.setActive(computedName);
+        this.setCurrentIndex(index);
+        wx.nextTick(() => {
+          this.trigger('click');
+        });
       }
     },
 
-    setActive(name) {
-      if (name !== this.currentName) {
-        this.currentName = name;
-        this.trigger('change', name);
-        this.setActiveTab();
+    // correct the index of active tab
+    setCurrentIndexByName(name) {
+      const { children = [] } = this;
+      const matched = children.filter(
+        (child: TrivialInstance) => child.getComputedName() === name
+      );
+      const defaultIndex = (children[0] || {}).index || 0;
+      this.setCurrentIndex(matched.length ? matched[0].index : defaultIndex);
+    },
+
+    setCurrentIndex(currentIndex) {
+      const { data, children = [] } = this;
+
+      if (
+        !isDef(currentIndex) ||
+        currentIndex === data.currentIndex ||
+        currentIndex >= children.length ||
+        currentIndex < 0
+      ) {
+        return;
+      }
+
+      const shouldEmitChange = data.currentIndex !== null;
+      this.setData({ currentIndex });
+
+      children.forEach((item: TrivialInstance, index: number) => {
+        const active = index === currentIndex;
+        if (active !== item.data.active) {
+          item.updateRender(active, this);
+        }
+      });
+
+      wx.nextTick(() => {
+        this.setLine();
+        this.setTrack();
+        this.scrollIntoView();
+
+        this.trigger('input');
+        if (shouldEmitChange) {
+          this.trigger('change');
+        }
+      });
+    },
+
+    getCurrentName() {
+      const activeTab = this.children[this.data.currentIndex];
+
+      if (activeTab) {
+        return activeTab.getComputedName();
       }
     },
 
@@ -211,65 +259,12 @@ VantComponent({
     setTrack() {
       const { animated, duration, currentIndex } = this.data;
 
-      if (!animated) return '';
-
-      this.getRect('.van-tabs__content').then(
-        (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
-          const { width } = rect;
-
-          this.setData({
-            trackStyle: `
-              width: ${width * this.children.length}px;
-              left: ${-1 * currentIndex * width}px;
-              transition: left ${duration}s;
-              display: -webkit-box;
-              display: flex;
-            `
-          });
-
-          const data = { width, animated };
-
-          this.children.forEach(
-            (item: WechatMiniprogram.Component.TrivialInstance) => {
-              item.setData(data);
-            }
-          );
-        }
-      );
-    },
-
-    setActiveTab() {
-      if (!isDef(this.currentName)) {
-        const { active } = this.data;
-        const { children = [] } = this;
-
-        this.currentName =
-          active === '' && children.length
-            ? children[0].getComputedName()
-            : active;
-      }
-
-      this.children.forEach(
-        (item: WechatMiniprogram.Component.TrivialInstance, index: number) => {
-          const data: TabItemData = {
-            active: item.getComputedName() === this.currentName
-          };
-
-          if (data.active) {
-            this.setData({ currentIndex: index });
-            data.inited = true;
-          }
-
-          if (data.active !== item.data.active) {
-            item.setData(data);
-          }
-        }
-      );
-
-      nextTick(() => {
-        this.setLine();
-        this.setTrack();
-        this.scrollIntoView();
+      this.setData({
+        trackStyle: `
+          transform: translate3d(${-100 * currentIndex}%, 0, 0);
+          -webkit-transition-duration: ${animated ? duration : 0}s;
+          transition-duration: ${animated ? duration : 0}s;
+        `
       });
     },
 
@@ -322,17 +317,14 @@ VantComponent({
       if (!this.data.swipeable) return;
 
       const { tabs, currentIndex } = this.data;
-
       const { direction, deltaX, offsetX } = this;
       const minSwipeDistance = 50;
 
       if (direction === 'horizontal' && offsetX >= minSwipeDistance) {
         if (deltaX > 0 && currentIndex !== 0) {
-          const child = this.children[currentIndex - 1];
-          this.setActive(child.getComputedName());
+          this.setCurrentIndex(currentIndex - 1);
         } else if (deltaX < 0 && currentIndex !== tabs.length - 1) {
-          const child = this.children[currentIndex + 1];
-          this.setActive(child.getComputedName());
+          this.setCurrentIndex(currentIndex + 1);
         }
       }
     }

packages/tabs/index.wxml

@@ -1,7 +1,13 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 
 <view class="custom-class {{ utils.bem('tabs', [type]) }}">
-  <van-sticky disabled="{{ !sticky }}" z-index="{{ zIndex }}" offset-top="{{ offsetTop }}" bind:scroll="onTouchScroll">
+  <van-sticky
+    disabled="{{ !sticky }}"
+    z-index="{{ zIndex }}"
+    offset-top="{{ offsetTop }}"
+    container="{{ container }}"
+    bind:scroll="onTouchScroll"
+  >
     <view class="{{ utils.bem('tabs__wrap', { scrollable }) }} {{ type === 'line' && border ? 'van-hairline--top-bottom' : '' }}">
       <slot name="nav-left" />