fix(tab): 使用原生属性替换超长滚动的offset

#781
Tencent · Aug 19, 2022 · 0aa89aa · 0aa89aa
1 parent e304f20
commit 0aa89aa
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 22 deletions.
diff --git a/src/tabs/tabs.ts b/src/tabs/tabs.ts
@@ -69,7 +69,8 @@ export default class Tabs extends SuperComponent {
     isScrollY: false,
     direction: 'X',
     animate: { duration: 0 },
-    offset: 0,
+    // offset: 0,
+    itemId: 'item0',
   };
 
   created() {
@@ -140,19 +141,19 @@ export default class Tabs extends SuperComponent {
     }
   }
 
-  calcScrollOffset(
-    containerWidth: number,
-    totalWidth: number,
-    targetLeft: number,
-    targetWidth: number,
-    offset: number,
-  ) {
-    if (offset + targetLeft > containerWidth / 2) {
-      const maxOffset = totalWidth - containerWidth;
-      return Math.min(Math.abs(containerWidth / 2 - targetLeft - offset - targetWidth / 2), maxOffset);
-    }
-    return 0;
-  }
+  // calcScrollOffset(
+  //   containerWidth: number,
+  //   totalWidth: number,
+  //   targetLeft: number,
+  //   targetWidth: number,
+  //   offset: number,
+  // ) {
+  //   if (offset + targetLeft > containerWidth / 2) {
+  //     const maxOffset = totalWidth - containerWidth;
+  //     return Math.min(Math.abs(containerWidth / 2 - targetLeft - offset - targetWidth / 2), maxOffset);
+  //   }
+  //   return 0;
+  // }
 
   setTrack() {
     if (!this.properties.showBottomLine) return;
@@ -175,15 +176,15 @@ export default class Tabs extends SuperComponent {
         }
 
         if (this.containerWidth) {
-          const offset = this.calcScrollOffset(
-            this.containerWidth,
-            rect.width * res.length,
-            rect.left,
-            rect.width,
-            this.data.offset,
-          );
+          // const offset = this.calcScrollOffset(
+          //   this.containerWidth,
+          //   rect.width * res.length,
+          //   rect.left,
+          //   rect.width,
+          //   this.data.offset,
+          // );
           this.setData({
-            offset,
+            itemId: `item${rect.dataset.index}`,
           });
         }
 

diff --git a/src/tabs/tabs.wxml b/src/tabs/tabs.wxml
@@ -16,12 +16,14 @@
         scroll-x="{{isScrollX}}"
         scroll-y="{{isScrollY}}"
         scroll-with-animation
+        scroll-into-view="{{itemId}}"
       >
         <view class="{{classPrefix}}__nav">
           <view
             wx:for="{{tabs}}"
             wx:key="index"
             data-index="{{index}}"
+            id="{{'item'+index}}"
             class="{{classPrefix}}__item {{prefix}}-class-item {{item.disabled ? (prefix + '-is-disabled') : '' }} {{currentIndex === index ? prefix + '-is-active ' + prefix + '-class-active' : ''}}"
             bind:tap="onTabTap"
           >