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