fix(tab): use groupSetData to keep tab render sync

fix #3290, fix #1867

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<WechatMiniprogram.BoundingClientRectCallbackResult>(
     (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<WechatMiniprogram.BoundingClientRectCallbackResult[]>(
     (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> | unknown) {
   if (isPromise(promiseLike)) {
     return promiseLike;

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;
+}

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;
 

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,

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,

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 });
           }

packages/notice-bar/index.ts

@@ -69,8 +69,8 @@ VantComponent({
   methods: {
     init() {
       Promise.all([
-        getRect.call(this, '.van-notice-bar__content'),
+        getRect(this, '.van-notice-bar__content'),
-        getRect.call(this, '.van-notice-bar__wrap'),
+        getRect(this, '.van-notice-bar__wrap'),
       ]).then((rects) => {
         const [contentRect, wrapRect] = rects;
         if (

packages/progress/index.ts

@@ -41,8 +41,8 @@ VantComponent({
   methods: {
     setLeft() {
       Promise.all([
-        getRect.call(this, '.van-progress'),
+        getRect(this, '.van-progress'),
-        getRect.call(this, '.van-progress__pivot'),
+        getRect(this, '.van-progress__pivot'),
       ]).then(([portion, pivot]) => {
         if (portion && pivot) {
           this.setData({

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);

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);

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;

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 });
         });
       });

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) => {
+      groupSetData(this, () => {
-        const active = index === currentIndex;
+        children.forEach((item: TrivialInstance, index: number) => {
-        if (active !== item.data.active || !item.inited) {
+          const active = index === currentIndex;
-          item.updateRender(active, this);
+          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'),
+        getAllRect(this, '.van-tab'),
-        getRect.call(this, '.van-tabs__line'),
+        getRect(this, '.van-tabs__line'),
       ]).then(([rects = [], lineRect]) => {
         const rect = rects[currentIndex];
 
@@ -260,8 +262,8 @@ VantComponent({
       }
 
       Promise.all([
-        getAllRect.call(this, '.van-tab'),
+        getAllRect(this, '.van-tab'),
-        getRect.call(this, '.van-tabs__nav'),
+        getRect(this, '.van-tabs__nav'),
       ]).then(([tabRects, navRect]) => {
         const tabRect = tabRects[currentIndex];
         const offsetLeft = tabRects