From 60453083b3316ca416a7bfc5954244f752a54921 Mon Sep 17 00:00:00 2001 From: rex Date: Mon, 18 Nov 2019 21:15:20 +0800 Subject: [PATCH] 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 | 10 +- example/pages/sticky/index.wxml | 14 +- example/pages/tab/index.js | 6 +- packages/sticky/README.md | 29 ++++ packages/sticky/index.ts | 150 +++++++++++++++++---- packages/sticky/index.wxml | 2 +- packages/tab/README.md | 3 +- packages/tab/index.less | 6 + packages/tab/index.ts | 20 +-- packages/tab/index.wxml | 4 +- packages/tabs/index.less | 4 + packages/tabs/index.ts | 228 +++++++++++++++----------------- packages/tabs/index.wxml | 8 +- 13 files changed, 321 insertions(+), 163 deletions(-) diff --git a/example/pages/sticky/index.js b/example/pages/sticky/index.js index c54a95ec..fa5c1540 100644 --- a/example/pages/sticky/index.js +++ b/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') + }); + } }); diff --git a/example/pages/sticky/index.wxml b/example/pages/sticky/index.wxml index e00da7a9..a432ba46 100644 --- a/example/pages/sticky/index.wxml +++ b/example/pages/sticky/index.wxml @@ -1,6 +1,6 @@ - + 基础用法 @@ -8,8 +8,18 @@ - + 吸顶距离 + + + + + + 指定容器 + + + + diff --git a/example/pages/tab/index.js b/example/pages/tab/index.js index a1632646..fc197ca8 100644 --- a/example/pages/tab/index.js +++ b/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' }); } diff --git a/packages/sticky/README.md b/packages/sticky/README.md index 31be8b52..775d7d78 100644 --- a/packages/sticky/README.md +++ b/packages/sticky/README.md @@ -36,6 +36,34 @@ Sticky 组件与 CSS 中`position: sticky`属性实现的效果一致，当组 ``` +### 指定容器 + +通过`container`属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置 + +```html + + + + 指定容器 + + + +``` + +```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 diff --git a/packages/sticky/index.ts b/packages/sticky/index.ts index b3ba7411..1ae24a93 100644 --- a/packages/sticky/index.ts +++ b/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(); } }); diff --git a/packages/sticky/index.wxml b/packages/sticky/index.wxml index 036cf143..2f95359a 100644 --- a/packages/sticky/index.wxml +++ b/packages/sticky/index.wxml @@ -1,6 +1,6 @@ - + diff --git a/packages/tab/README.md b/packages/tab/README.md index e2ec6cfa..d874ef2f 100644 --- a/packages/tab/README.md +++ b/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 diff --git a/packages/tab/index.less b/packages/tab/index.less index fc63c129..a7337d18 100644 --- a/packages/tab/index.less +++ b/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; diff --git a/packages/tab/index.ts b/packages/tab/index.ts index 041a4907..9e6bf76e 100644 --- a/packages/tab/index.ts +++ b/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(); diff --git a/packages/tab/index.wxml b/packages/tab/index.wxml index b90f452a..d67f2ae4 100644 --- a/packages/tab/index.wxml +++ b/packages/tab/index.wxml @@ -1,9 +1,9 @@ diff --git a/packages/tabs/index.less b/packages/tabs/index.less index 3f5c0d01..7d292ca9 100644 --- a/packages/tabs/index.less +++ b/packages/tabs/index.less @@ -73,6 +73,10 @@ &__track { position: relative; + display: flex; + width: 100%; + height: 100%; + transition-property: transform; } &__content { diff --git a/packages/tabs/index.ts b/packages/tabs/index.ts index 7b837fad..ad9e9c91 100644 --- a/packages/tabs/index.ts +++ b/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); } } } diff --git a/packages/tabs/index.wxml b/packages/tabs/index.wxml index 10c80210..632601f8 100644 --- a/packages/tabs/index.wxml +++ b/packages/tabs/index.wxml @@ -1,7 +1,13 @@ - +