From 2a07d42d68ed6aa27fa381d66808e9fd350765d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=81=E9=87=87?= Date: Fri, 28 Jun 2019 22:23:51 +0800 Subject: [PATCH 1/5] [bugfix] Picker: fix the error at low version of the Android. See #3538 --- src/picker/PickerColumn.js | 5 +++-- src/picker/index.less | 1 + 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/picker/PickerColumn.js b/src/picker/PickerColumn.js index 7cc3cf0c4ac..f3c2f8cdfca 100644 --- a/src/picker/PickerColumn.js +++ b/src/picker/PickerColumn.js @@ -16,7 +16,8 @@ const MOMENTUM_LIMIT_DISTANCE = 15; const [createComponent, bem] = createNamespace('picker-column'); function getElementTranslateY(element) { - const { transform } = window.getComputedStyle(element); + const style = window.getComputedStyle(element); + const transform = style.transform || style.webkitTransform; const translateY = transform.slice(7, transform.length - 1).split(', ')[5]; return Number(translateY); @@ -228,7 +229,7 @@ export default createComponent({ const wrapperStyle = { transform: `translate3d(0, ${this.offset + baseOffset}px, 0)`, transitionDuration: `${this.duration}ms`, - transitionProperty: this.duration ? 'transform' : 'none', + transitionProperty: this.duration ? 'all' : 'none', lineHeight: `${itemHeight}px` }; diff --git a/src/picker/index.less b/src/picker/index.less index 4bd674483db..aa9e115318a 100644 --- a/src/picker/index.less +++ b/src/picker/index.less @@ -71,6 +71,7 @@ linear-gradient(0deg, hsla(0, 0%, 100%, .9), hsla(0, 0%, 100%, .4)); background-repeat: no-repeat; background-position: top, bottom; + backface-visibility: hidden; pointer-events: none; } From ea67220f66152bf09a7cf2cf4fed78a0da6f91f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=81=E9=87=87?= Date: Sat, 13 Jul 2019 18:18:20 +0800 Subject: [PATCH 2/5] [bugfix] compatible `` is the scene of the scrolling container. see #3823 --- src/field/index.js | 4 ++-- src/index-bar/index.js | 7 +++---- src/stepper/index.js | 4 ++-- src/tabs/index.js | 6 +++--- src/utils/dom/scroll.ts | 22 ++++++++++++++++++---- 5 files changed, 28 insertions(+), 15 deletions(-) diff --git a/src/field/index.js b/src/field/index.js index 418677aeb5d..d5ac2d1a063 100644 --- a/src/field/index.js +++ b/src/field/index.js @@ -2,7 +2,7 @@ import Icon from '../icon'; import Cell from '../cell'; import { cellProps } from '../cell/shared'; import { preventDefault } from '../utils/dom/event'; -import { getRootScrollTop } from '../utils/dom/scroll'; +import { getRootScrollTop, setRootScrollTop } from '../utils/dom/scroll'; import { createNamespace, isObj, isDef, addUnit } from '../utils'; import { isIOS } from '../utils/validate/system'; @@ -139,7 +139,7 @@ export default createComponent({ // https://developers.weixin.qq.com/community/develop/doc/00044ae90742f8c82fb78fcae56800 /* istanbul ignore next */ if (isIOS()) { - window.scrollTo(0, getRootScrollTop()); + setRootScrollTop(getRootScrollTop()); } }, diff --git a/src/index-bar/index.js b/src/index-bar/index.js index a6be6c7a662..3113b05a1cc 100644 --- a/src/index-bar/index.js +++ b/src/index-bar/index.js @@ -7,6 +7,7 @@ import { getScrollTop, getElementTop, getRootScrollTop, + setRootScrollTop, getScrollEventTarget } from '../utils/dom/scroll'; @@ -77,9 +78,7 @@ export default createComponent({ methods: { onScroll() { - const scrollTop = this.scroller === window - ? getScrollTop(this.scroller) - : 0; + const scrollTop = getScrollTop(this.scroller); const rects = this.children.map(item => ({ height: item.height, top: getElementTop(item.$el) @@ -154,7 +153,7 @@ export default createComponent({ match[0].scrollIntoView(); if (this.stickyOffsetTop) { - window.scrollTo(0, getRootScrollTop() - this.stickyOffsetTop); + setRootScrollTop(getRootScrollTop() - this.stickyOffsetTop); } this.$emit('select', match[0].index); diff --git a/src/stepper/index.js b/src/stepper/index.js index 883e161e32d..5c6224d9d06 100644 --- a/src/stepper/index.js +++ b/src/stepper/index.js @@ -1,5 +1,5 @@ import { createNamespace, isDef, addUnit } from '../utils'; -import { getRootScrollTop } from '../utils/dom/scroll'; +import { getRootScrollTop, setRootScrollTop } from '../utils/dom/scroll'; import { isIOS } from '../utils/validate/system'; const [createComponent, bem] = createNamespace('stepper'); @@ -160,7 +160,7 @@ export default createComponent({ // https://developers.weixin.qq.com/community/develop/doc/00044ae90742f8c82fb78fcae56800 /* istanbul ignore next */ if (isIOS()) { - window.scrollTo(0, getRootScrollTop()); + setRootScrollTop(getRootScrollTop()); } }, diff --git a/src/tabs/index.js b/src/tabs/index.js index c920520f09e..9f66ad43355 100644 --- a/src/tabs/index.js +++ b/src/tabs/index.js @@ -4,7 +4,7 @@ import { on, off } from '../utils/dom/event'; import { ParentMixin } from '../mixins/relation'; import { BindEventMixin } from '../mixins/bind-event'; import { - setScrollTop, + setRootScrollTop, getScrollTop, getElementTop, getScrollEventTarget @@ -145,7 +145,7 @@ export default createComponent({ // scroll to correct position if (this.position === 'top' || this.position === 'bottom') { - setScrollTop(window, getElementTop(this.$el) - this.offsetTop); + setRootScrollTop(getElementTop(this.$el) - this.offsetTop); } }, @@ -184,7 +184,7 @@ export default createComponent({ // adjust tab position onScroll() { - const scrollTop = getScrollTop(window) + this.offsetTop; + const scrollTop = getScrollTop(this.scrollEl) + this.offsetTop; const elTopToPageTop = getElementTop(this.$el); const elBottomToPageTop = elTopToPageTop + this.$el.offsetHeight - this.$refs.wrap.offsetHeight; diff --git a/src/utils/dom/scroll.ts b/src/utils/dom/scroll.ts index 57914006961..39d40a9b783 100644 --- a/src/utils/dom/scroll.ts +++ b/src/utils/dom/scroll.ts @@ -3,18 +3,26 @@ type ScrollElement = HTMLElement | Window; // get nearest scroll element // http://w3help.org/zh-cn/causes/SD9013 // http://stackoverflow.com/questions/17016740/onscroll-function-is-not-working-for-chrome +const overflowScrollReg = /scroll|auto/i; export function getScrollEventTarget(element: HTMLElement, rootParent: ScrollElement = window) { let node = element; while ( node && node.tagName !== 'HTML' && - node.tagName !== 'BODY' && node.nodeType === 1 && node !== rootParent ) { const { overflowY } = window.getComputedStyle(node); - if (overflowY === 'scroll' || overflowY === 'auto') { - return node; + if (overflowScrollReg.test(overflowY)) { + if (node.tagName !== 'BODY') { + return node; + } + + // see: https://github.com/youzan/vant/issues/3823 + const { overflowY: htmlOverflowY } = window.getComputedStyle(node.parentNode); + if (overflowScrollReg.test(htmlOverflowY)) { + return node; + } } node = node.parentNode; } @@ -33,11 +41,17 @@ export function getRootScrollTop(): number { return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; } +export function setRootScrollTop(value: number) { + const { body } = document; + window.scrollTo(0, value); + 'scrollTop' in body ? (body.scrollTop = value) : (body as HTMLElement).scrollTo(0, value); +} + // get distance from element top to page top export function getElementTop(element: ScrollElement) { return ( (element === window ? 0 : (element).getBoundingClientRect().top) + - getScrollTop(window) + getRootScrollTop() ); } From b38bec5e22da1e871a2edab59a789a40361468a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=81=E9=87=87?= Date: Sat, 13 Jul 2019 18:22:04 +0800 Subject: [PATCH 3/5] [improvement] List: update demo --- src/list/demo/index.vue | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/list/demo/index.vue b/src/list/demo/index.vue index b89ba7b54da..a7fd5482f32 100644 --- a/src/list/demo/index.vue +++ b/src/list/demo/index.vue @@ -79,9 +79,14 @@ export default { }, methods: { - onLoad(index) { + onLoad(index, isRefresh) { const list = this.list[index]; + list.loading = true; setTimeout(() => { + if (isRefresh) { + list.items = []; + } + for (let i = 0; i < 10; i++) { const text = list.items.length + 1; list.items.push(text < 10 ? '0' + text : text); @@ -104,11 +109,10 @@ export default { onRefresh(index) { const list = this.list[index]; setTimeout(() => { - list.items = []; list.error = false; list.finished = false; list.refreshing = false; - window.scrollTo(0, 10); + this.onLoad(index, true); }, 1000); } } From 1361f6c91166c1addf5d9f4e3c7e42a0339838b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=81=E9=87=87?= Date: Sun, 14 Jul 2019 14:40:21 +0800 Subject: [PATCH 4/5] [bugfix]: Index-bar: fix the bug when the scroller is not window or body. see #3774 --- src/index-bar/index.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/index-bar/index.js b/src/index-bar/index.js index 3113b05a1cc..891f2c30b73 100644 --- a/src/index-bar/index.js +++ b/src/index-bar/index.js @@ -78,7 +78,13 @@ export default createComponent({ methods: { onScroll() { - const scrollTop = getScrollTop(this.scroller); + let scrollTop; + if (this.scroller === window || this.scroller === document.body) { + scrollTop = getScrollTop(this.scroller); + } else { + // see: https://github.com/youzan/vant/issues/3774 + scrollTop = 0; + } const rects = this.children.map(item => ({ height: item.height, top: getElementTop(item.$el) From ad49c45dba7046123d9f6e90f5020b02225d572f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=81=E9=87=87?= Date: Mon, 15 Jul 2019 19:16:37 +0800 Subject: [PATCH 5/5] [improvement] Optimize `setRootScrollTop` implementation --- src/utils/dom/scroll.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/utils/dom/scroll.ts b/src/utils/dom/scroll.ts index 39d40a9b783..ea47358e843 100644 --- a/src/utils/dom/scroll.ts +++ b/src/utils/dom/scroll.ts @@ -42,9 +42,8 @@ export function getRootScrollTop(): number { } export function setRootScrollTop(value: number) { - const { body } = document; - window.scrollTo(0, value); - 'scrollTop' in body ? (body.scrollTop = value) : (body as HTMLElement).scrollTo(0, value); + setScrollTop(window, value); + setScrollTop(document.body, value); } // get distance from element top to page top