From b28d128991e8c15a48b6981a6ea3eefbca706c97 Mon Sep 17 00:00:00 2001 From: zhongnan Date: Wed, 16 Dec 2020 23:33:46 +0800 Subject: [PATCH] fix(tab): use groupSetData to keep tab render sync fix #3290, fix #1867 --- packages/common/utils.ts | 20 ++++++++++++++++---- packages/common/version.ts | 5 +++++ packages/dropdown-menu/index.ts | 2 +- packages/index-anchor/index.ts | 2 +- packages/index-bar/index.ts | 4 ++-- packages/nav-bar/index.ts | 2 +- packages/notice-bar/index.ts | 4 ++-- packages/progress/index.ts | 4 ++-- packages/rate/index.ts | 2 +- packages/slider/index.ts | 4 ++-- packages/sticky/index.ts | 4 ++-- packages/tabbar/index.ts | 2 +- packages/tabs/index.ts | 22 ++++++++++++---------- 13 files changed, 48 insertions(+), 29 deletions(-) diff --git a/packages/common/utils.ts b/packages/common/utils.ts index 954f41f0..7fd71c52 100644 --- a/packages/common/utils.ts +++ b/packages/common/utils.ts @@ -1,4 +1,5 @@ import { isNumber, isPlainObject, isPromise } from './validator'; +import { canIUseGroupSetData } from './version'; export function isDef(value: any): boolean { return value !== undefined && value !== null; @@ -68,13 +69,13 @@ export function pickExclude(obj: unknown, keys: string[]) { } export function getRect( - this: WechatMiniprogram.Component.TrivialInstance, + context: WechatMiniprogram.Component.TrivialInstance, selector: string ) { return new Promise( (resolve) => { wx.createSelectorQuery() - .in(this) + .in(context) .select(selector) .boundingClientRect() .exec((rect = []) => resolve(rect[0])); @@ -83,13 +84,13 @@ export function getRect( } export function getAllRect( - this: WechatMiniprogram.Component.TrivialInstance, + context: WechatMiniprogram.Component.TrivialInstance, selector: string ) { return new Promise( (resolve) => { wx.createSelectorQuery() - .in(this) + .in(context) .selectAll(selector) .boundingClientRect() .exec((rect = []) => resolve(rect[0])); @@ -97,6 +98,17 @@ export function getAllRect( ); } +export function groupSetData( + context: WechatMiniprogram.Component.TrivialInstance, + cb: () => void +) { + if (canIUseGroupSetData()) { + context.groupSetData(cb); + } else { + cb(); + } +} + export function toPromise(promiseLike: Promise | unknown) { if (isPromise(promiseLike)) { return promiseLike; diff --git a/packages/common/version.ts b/packages/common/version.ts index 67708206..01f2454c 100644 --- a/packages/common/version.ts +++ b/packages/common/version.ts @@ -41,3 +41,8 @@ export function canIUseAnimate() { const system = getSystemInfoSync(); return compareVersion(system.SDKVersion, '2.9.0') >= 0; } + +export function canIUseGroupSetData() { + const system = getSystemInfoSync(); + return compareVersion(system.SDKVersion, '2.4.0') >= 0; +} diff --git a/packages/dropdown-menu/index.ts b/packages/dropdown-menu/index.ts index 342081cd..8c4fe3c2 100644 --- a/packages/dropdown-menu/index.ts +++ b/packages/dropdown-menu/index.ts @@ -101,7 +101,7 @@ VantComponent({ getChildWrapperStyle() { const { zIndex, direction } = this.data; - return getRect.call(this, '.van-dropdown-menu').then((rect) => { + return getRect(this, '.van-dropdown-menu').then((rect) => { const { top = 0, bottom = 0 } = rect; const offset = direction === 'down' ? bottom : this.windowHeight - top; diff --git a/packages/index-anchor/index.ts b/packages/index-anchor/index.ts index 693f113e..f768cc20 100644 --- a/packages/index-anchor/index.ts +++ b/packages/index-anchor/index.ts @@ -21,7 +21,7 @@ VantComponent({ methods: { scrollIntoView(scrollTop) { - getRect.call(this, '.van-index-anchor-wrapper').then((rect) => { + getRect(this, '.van-index-anchor-wrapper').then((rect) => { wx.pageScrollTo({ duration: 0, scrollTop: scrollTop + rect.top - this.parent.data.stickyOffsetTop, diff --git a/packages/index-bar/index.ts b/packages/index-bar/index.ts index fc11a632..fd816452 100644 --- a/packages/index-bar/index.ts +++ b/packages/index-bar/index.ts @@ -108,7 +108,7 @@ VantComponent({ }, setListRect() { - return getRect.call(this, '.van-index-bar').then((rect) => { + return getRect(this, '.van-index-bar').then((rect) => { Object.assign(this, { height: rect.height, top: rect.top + this.scrollTop, @@ -117,7 +117,7 @@ VantComponent({ }, setSiderbarRect() { - return getRect.call(this, '.van-index-bar__sidebar').then((res) => { + return getRect(this, '.van-index-bar__sidebar').then((res) => { this.sidebar = { height: res.height, top: res.top, diff --git a/packages/nav-bar/index.ts b/packages/nav-bar/index.ts index fd34d1a7..a92fc2aa 100644 --- a/packages/nav-bar/index.ts +++ b/packages/nav-bar/index.ts @@ -64,7 +64,7 @@ VantComponent({ } wx.nextTick(() => { - getRect.call(this, '.van-nav-bar').then((res) => { + getRect(this, '.van-nav-bar').then((res) => { if (res && 'height' in res) { this.setData({ height: res.height }); } diff --git a/packages/notice-bar/index.ts b/packages/notice-bar/index.ts index 85b0a9f8..3c18ccf7 100644 --- a/packages/notice-bar/index.ts +++ b/packages/notice-bar/index.ts @@ -69,8 +69,8 @@ VantComponent({ methods: { init() { Promise.all([ - getRect.call(this, '.van-notice-bar__content'), - getRect.call(this, '.van-notice-bar__wrap'), + getRect(this, '.van-notice-bar__content'), + getRect(this, '.van-notice-bar__wrap'), ]).then((rects) => { const [contentRect, wrapRect] = rects; if ( diff --git a/packages/progress/index.ts b/packages/progress/index.ts index 96d437e5..becb6233 100644 --- a/packages/progress/index.ts +++ b/packages/progress/index.ts @@ -41,8 +41,8 @@ VantComponent({ methods: { setLeft() { Promise.all([ - getRect.call(this, '.van-progress'), - getRect.call(this, '.van-progress__pivot'), + getRect(this, '.van-progress'), + getRect(this, '.van-progress__pivot'), ]).then(([portion, pivot]) => { if (portion && pivot) { this.setData({ diff --git a/packages/rate/index.ts b/packages/rate/index.ts index 41fcbd00..6c062eb5 100644 --- a/packages/rate/index.ts +++ b/packages/rate/index.ts @@ -83,7 +83,7 @@ VantComponent({ const { clientX } = event.touches[0]; - getAllRect.call(this, '.van-rate__icon').then((list) => { + getAllRect(this, '.van-rate__icon').then((list) => { const target = list .sort((item) => item.right - item.left) .find((item) => clientX >= item.left && clientX <= item.right); diff --git a/packages/slider/index.ts b/packages/slider/index.ts index 88998d73..bf701d49 100644 --- a/packages/slider/index.ts +++ b/packages/slider/index.ts @@ -61,7 +61,7 @@ VantComponent({ this.touchMove(event); this.dragStatus = 'draging'; - getRect.call(this, '.van-slider').then((rect) => { + getRect(this, '.van-slider').then((rect) => { const diff = (this.deltaX / rect.width) * this.data.max; this.newValue = this.startValue + diff; this.updateValue(this.newValue, false, true); @@ -82,7 +82,7 @@ VantComponent({ const { min } = this.data; - getRect.call(this, '.van-slider').then((rect) => { + getRect(this, '.van-slider').then((rect) => { const value = ((event.detail.x - rect.left) / rect.width) * this.getRange() + min; this.updateValue(value, true); diff --git a/packages/sticky/index.ts b/packages/sticky/index.ts index 5860be2e..0aca1cd2 100644 --- a/packages/sticky/index.ts +++ b/packages/sticky/index.ts @@ -66,7 +66,7 @@ VantComponent({ if (typeof container === 'function') { Promise.all([ - getRect.call(this, ROOT_ELEMENT), + getRect(this, ROOT_ELEMENT), this.getContainerRect(), ]).then(([root, container]) => { if (offsetTop + root.height > container.height + container.top) { @@ -88,7 +88,7 @@ VantComponent({ return; } - getRect.call(this, ROOT_ELEMENT).then((root) => { + getRect(this, ROOT_ELEMENT).then((root) => { if (offsetTop >= root.top) { this.setDataAfterDiff({ fixed: true, height: root.height }); this.transform = 0; diff --git a/packages/tabbar/index.ts b/packages/tabbar/index.ts index 1f8a8c94..6c003617 100644 --- a/packages/tabbar/index.ts +++ b/packages/tabbar/index.ts @@ -73,7 +73,7 @@ VantComponent({ } wx.nextTick(() => { - getRect.call(this, '.van-tabbar').then((res) => { + getRect(this, '.van-tabbar').then((res) => { this.setData({ height: res.height }); }); }); diff --git a/packages/tabs/index.ts b/packages/tabs/index.ts index 52742ee6..6c885d8d 100644 --- a/packages/tabs/index.ts +++ b/packages/tabs/index.ts @@ -1,6 +1,6 @@ import { VantComponent } from '../common/component'; import { touch } from '../mixins/touch'; -import { getAllRect, getRect, isDef } from '../common/utils'; +import { getAllRect, getRect, groupSetData, isDef } from '../common/utils'; type TrivialInstance = WechatMiniprogram.Component.TrivialInstance; @@ -186,11 +186,13 @@ VantComponent({ return; } - children.forEach((item: TrivialInstance, index: number) => { - const active = index === currentIndex; - if (active !== item.data.active || !item.inited) { - item.updateRender(active, this); - } + groupSetData(this, () => { + children.forEach((item: TrivialInstance, index: number) => { + const active = index === currentIndex; + if (active !== item.data.active || !item.inited) { + item.updateRender(active, this); + } + }); }); if (currentIndex === data.currentIndex) { @@ -228,8 +230,8 @@ VantComponent({ const { currentIndex, ellipsis } = this.data; Promise.all([ - getAllRect.call(this, '.van-tab'), - getRect.call(this, '.van-tabs__line'), + getAllRect(this, '.van-tab'), + getRect(this, '.van-tabs__line'), ]).then(([rects = [], lineRect]) => { const rect = rects[currentIndex]; @@ -260,8 +262,8 @@ VantComponent({ } Promise.all([ - getAllRect.call(this, '.van-tab'), - getRect.call(this, '.van-tabs__nav'), + getAllRect(this, '.van-tab'), + getRect(this, '.van-tabs__nav'), ]).then(([tabRects, navRect]) => { const tabRect = tabRects[currentIndex]; const offsetLeft = tabRects