From df03bf3d12488305db4aa7210a75ce04fa49d409 Mon Sep 17 00:00:00 2001 From: rex Date: Fri, 10 Apr 2020 22:59:37 +0800 Subject: [PATCH] fix(IndexBar): remove prop scrollTop (#2999) fix #2821, fix #2768 --- packages/index-anchor/index.ts | 19 +++++++++- packages/index-bar/README.md | 24 +----------- packages/index-bar/index.ts | 67 ++++++++++++++++------------------ 3 files changed, 52 insertions(+), 58 deletions(-) diff --git a/packages/index-anchor/index.ts b/packages/index-anchor/index.ts index 56255ce9..3b78115d 100644 --- a/packages/index-anchor/index.ts +++ b/packages/index-anchor/index.ts @@ -4,7 +4,7 @@ VantComponent({ relation: { name: 'index-bar', type: 'ancestor', - current: 'index-anchor', + current: 'index-anchor' }, props: { @@ -16,5 +16,22 @@ VantComponent({ active: false, wrapperStyle: '', anchorStyle: '' + }, + + methods: { + scrollIntoView(scrollTop) { + this.getBoundingClientRect().then( + (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => { + wx.pageScrollTo({ + duration: 0, + scrollTop: scrollTop + rect.top - this.parent.data.stickyOffsetTop + }); + } + ); + }, + + getBoundingClientRect() { + return this.getRect('.van-index-anchor-wrapper'); + } } }); diff --git a/packages/index-bar/README.md b/packages/index-bar/README.md index 9f869f75..dbbd3faa 100644 --- a/packages/index-bar/README.md +++ b/packages/index-bar/README.md @@ -20,7 +20,7 @@ 点击索引栏时，会自动跳转到对应的`IndexAnchor`锚点位置 ```html - + @@ -39,25 +39,12 @@ ``` -```javascript -Page({ - onPageScroll(event) { - this.setData({ - scrollTop: event.scrollTop - }); - } -}); -``` - ### 自定义索引列表 可以通过`index-list`属性自定义展示的索引字符列表， ```html - + 标题1 @@ -81,12 +68,6 @@ Page({ data: { indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }, - - onPageScroll(event) { - this.setData({ - scrollTop: event.scrollTop - }); - } }); ``` @@ -96,7 +77,6 @@ Page({ | 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| -| scroll-top | 当前滚动高度（自定义组件内部感知不到页面滚动，所以依赖接入方传入）| *Number* | 0 | - | | index-list | 索引字符列表 | *string[] \| number[]* | `A-Z` | - | | z-index | z-index 层级 | *number* | `1` | - | | sticky | 是否开启锚点自动吸顶 | *boolean* | `true` | - | diff --git a/packages/index-bar/index.ts b/packages/index-bar/index.ts index 1eacb629..7b01db32 100644 --- a/packages/index-bar/index.ts +++ b/packages/index-bar/index.ts @@ -1,5 +1,6 @@ import { VantComponent } from '../common/component'; import { GREEN } from '../common/color'; +import { pageScrollMixin } from '../mixins/page-scroll'; const indexList = () => { const indexList = []; @@ -20,9 +21,6 @@ VantComponent({ linked() { this.updateData(); }, - linkChanged() { - this.updateData(); - }, unlinked() { this.updateData(); } @@ -41,11 +39,6 @@ VantComponent({ type: String, value: GREEN }, - scrollTop: { - type: Number, - value: 0, - observer: 'onScroll' - }, stickyOffsetTop: { type: Number, value: 0 @@ -56,26 +49,39 @@ VantComponent({ } }, + mixins: [ + pageScrollMixin(function(event) { + this.scrollTop = event.scrollTop || 0; + this.onScroll(); + }) + ], + data: { activeAnchorIndex: null, showSidebar: false }, + created() { + this.scrollTop = 0; + }, + methods: { updateData() { - this.timer && clearTimeout(this.timer); + wx.nextTick(() => { + if (this.timer != null) { + clearTimeout(this.timer); + } - this.timer = setTimeout(() => { - this.children = this.getRelationNodes('../index-anchor/index'); + this.timer = setTimeout(() => { + this.setData({ + showSidebar: !!this.children.length + }); - this.setData({ - showSidebar: !!this.children.length - }); - - this.setRect().then(() => { - this.onScroll(); - }); - }, 0); + this.setRect().then(() => { + this.onScroll(); + }); + }, 0); + }); }, setRect() { @@ -95,7 +101,7 @@ VantComponent({ (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => { Object.assign(anchor, { height: rect.height, - top: rect.top + this.data.scrollTop + top: rect.top + this.scrollTop }); } ) @@ -108,7 +114,7 @@ VantComponent({ (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => { Object.assign(this, { height: rect.height, - top: rect.top + this.data.scrollTop + top: rect.top + this.scrollTop }); } ); @@ -147,8 +153,8 @@ VantComponent({ }, getActiveAnchorIndex() { - const { children } = this; - const { sticky, scrollTop, stickyOffsetTop } = this.data; + const { children, scrollTop } = this; + const { sticky, stickyOffsetTop } = this.data; for (let i = this.children.length - 1; i >= 0; i--) { const preAnchorHeight = i > 0 ? children[i - 1].height : 0; @@ -163,19 +169,13 @@ VantComponent({ }, onScroll() { - const { children = [] } = this; + const { children = [], scrollTop } = this; if (!children.length) { return; } - const { - sticky, - stickyOffsetTop, - zIndex, - highlightColor, - scrollTop - } = this.data; + const { sticky, stickyOffsetTop, zIndex, highlightColor } = this.data; const active = this.getActiveAnchorIndex(); @@ -298,11 +298,8 @@ VantComponent({ ); if (anchor) { + anchor.scrollIntoView(this.scrollTop); this.$emit('select', anchor.data.index); - wx.pageScrollTo({ - duration: 0, - scrollTop: anchor.top - }); } } }