diff --git a/src/tab/README.md b/src/tab/README.md
index 0538f36a9..617182bb9 100644
--- a/src/tab/README.md
+++ b/src/tab/README.md
@@ -205,7 +205,7 @@ In scrollspy mode, the list of content will be tiled
| sticky | Whether to use sticky mode | *boolean* | `false` | - |
| swipeable | Whether to switch tabs with swipe gestrue in the content | *boolean* | `false` | - |
| lazy-render | Whether to enable tab content lazy render | *boolean* | `true` | - |
-| scrollspy | Whether to use scrollspy mode | *boolean* | `false` | - |
+| scrollspy | Whether to use scrollspy mode | *boolean* | `false` | 2.3.0 |
### Tab Props
diff --git a/src/tab/README.zh-CN.md b/src/tab/README.zh-CN.md
index 32aba02f6..28a41e453 100644
--- a/src/tab/README.zh-CN.md
+++ b/src/tab/README.zh-CN.md
@@ -209,7 +209,7 @@ export default {
| sticky | 是否使用粘性定位布局 | *boolean* | `false` | - |
| swipeable | 是否开启手势滑动切换 | *boolean* | `false` | - |
| lazy-render | 是否开启标签页内容延迟渲染 | *boolean* | `true` | - |
-| scrollspy | 是否开启滚动导航 | *boolean* | `false` | - |
+| scrollspy | 是否开启滚动导航 | *boolean* | `false` | 2.3.0 |
### Tab Props
diff --git a/src/tab/index.js b/src/tab/index.js
index af73128c9..94aea7e10 100644
--- a/src/tab/index.js
+++ b/src/tab/index.js
@@ -45,12 +45,12 @@ export default createComponent({
},
render(h) {
- const { slots, isActive } = this;
- const shouldRender = this.inited || this.parent.scrollspy || !this.parent.lazyRender;
- const show = this.parent.scrollspy || isActive;
+ const { slots, parent, isActive } = this;
+ const shouldRender = this.inited || parent.scrollspy || !parent.lazyRender;
+ const show = parent.scrollspy || isActive;
const Content = shouldRender ? slots() : h();
- if (this.parent.animated) {
+ if (parent.animated) {
return (
this.scrollOffset) {
- if (i === 0) {
- return 0;
- }
- return i - 1;
+ return index === 0 ? 0 : index - 1;
}
}
- return i - 1;
+ return children.length - 1;
}
},
@@ -381,7 +384,7 @@ export default createComponent({
{Wrap}
diff --git a/src/tabs/utils.ts b/src/tabs/utils.ts
index 496ce2172..42cdbed65 100644
--- a/src/tabs/utils.ts
+++ b/src/tabs/utils.ts
@@ -1,7 +1,11 @@
-import { raf } from '../utils/dom/raf';
+import { raf, cancelRaf } from '../utils/dom/raf';
import { getRootScrollTop, setRootScrollTop } from '../utils/dom/scroll';
+let scrollLeftRafId: number;
+
export function scrollLeftTo(el: HTMLElement, to: number, duration: number) {
+ cancelRaf(scrollLeftRafId);
+
let count = 0;
const from = el.scrollLeft;
const frames = duration === 0 ? 1 : Math.round((duration * 1000) / 16);
@@ -10,7 +14,7 @@ export function scrollLeftTo(el: HTMLElement, to: number, duration: number) {
el.scrollLeft += (to - from) / frames;
if (++count < frames) {
- raf(animate);
+ scrollLeftRafId = raf(animate);
}
}
@@ -19,20 +23,20 @@ export function scrollLeftTo(el: HTMLElement, to: number, duration: number) {
export function scrollTopTo(to: number, duration: number, cb: Function) {
let current = getRootScrollTop();
- const toDown = current < to;
+ const isDown = current < to;
const frames = duration === 0 ? 1 : Math.round((duration * 1000) / 16);
- const pxPerFrames = (to - current) / frames;
+ const step = (to - current) / frames;
function animate() {
- current += pxPerFrames;
+ current += step;
- if ((toDown && current > to) || (!toDown && current < to)) {
+ if ((isDown && current > to) || (!isDown && current < to)) {
current = to;
}
setRootScrollTop(current);
- if ((toDown && current < to) || (!toDown && current > to)) {
+ if ((isDown && current < to) || (!isDown && current > to)) {
raf(animate);
} else {
cb && cb();