diff --git a/src/tabs/tabs.ts b/src/tabs/tabs.ts
index 85f051b3a..ac82a521b 100644
--- a/src/tabs/tabs.ts
+++ b/src/tabs/tabs.ts
@@ -69,6 +69,7 @@ export default class Tabs extends SuperComponent {
isScrollY: false,
direction: 'X',
animate: { duration: 0 },
+ offset: 0,
};
created() {
@@ -94,6 +95,9 @@ export default class Tabs extends SuperComponent {
isScrollY,
direction: isScrollX ? 'X' : 'Y',
});
+ this.gettingBoundingClientRect(`.${name}`, true).then((res: any) => {
+ this.containerWidth = res[0].width;
+ });
}
updateTabs() {
@@ -136,6 +140,20 @@ 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;
+ }
+
setTrack(color = '#0052d9') {
if (!this.properties.showBottomLine) return;
const { children } = this;
@@ -156,6 +174,19 @@ 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,
+ );
+ this.setData({
+ offset,
+ });
+ }
+
if (isScrollX) {
distance += (rect.width - trackLineWidth) / 2;
}
diff --git a/src/tabs/tabs.wxml b/src/tabs/tabs.wxml
index e9c5e791f..410a9c8c3 100644
--- a/src/tabs/tabs.wxml
+++ b/src/tabs/tabs.wxml
@@ -1,6 +1,13 @@
-
+