From 0285837c09682d6a0013e9e849e92207fc1e9409 Mon Sep 17 00:00:00 2001 From: dengyuqing Date: Wed, 14 Oct 2020 20:24:03 +0800 Subject: [PATCH 1/2] fix scroll list shaking --- src/components/scroll/scroll.vue | 7 ++++++- src/styles/components/scroll.less | 15 +++++++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/src/components/scroll/scroll.vue b/src/components/scroll/scroll.vue index 10c8e699..afe1f322 100644 --- a/src/components/scroll/scroll.vue +++ b/src/components/scroll/scroll.vue @@ -86,7 +86,12 @@ return `${prefixCls}-wrapper`; }, scrollContainerClasses() { - return `${prefixCls}-container`; + return [ + `${prefixCls}-container`, + { + [`${prefixCls}-container-loading`]: this.showBodyLoader + } + ]; }, slotContainerClasses() { return [ diff --git a/src/styles/components/scroll.less b/src/styles/components/scroll.less index aa18a5a3..0d1e378c 100644 --- a/src/styles/components/scroll.less +++ b/src/styles/components/scroll.less @@ -12,6 +12,21 @@ overflow-y: scroll; } + @keyframes ani-stop-slide { + from { + overflow-y: hidden; + tansform:translateZ(0); + } + to { + overflow-y: scroll; + tansform:translateZ(0); + } + } + + &-container-loading { + animation: ani-stop-slide 1.5s; + } + &-content { opacity: 1; transition: opacity 0.5s; From cd3f1a1fe746c8c72c79a0f54ea8e2964bdf1bba Mon Sep 17 00:00:00 2001 From: Aresn Date: Thu, 15 Oct 2020 09:56:03 +0800 Subject: [PATCH 2/2] Update scroll.vue --- src/components/scroll/scroll.vue | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/scroll/scroll.vue b/src/components/scroll/scroll.vue index afe1f322..f0fdb9c8 100644 --- a/src/components/scroll/scroll.vue +++ b/src/components/scroll/scroll.vue @@ -55,7 +55,11 @@ loadingText: { type: String }, - distanceToEdge: [Number, Array] + distanceToEdge: [Number, Array], + stopSlide: { + type: Boolean, + default: false + } }, data() { const distanceToEdge = this.calculateProximityThreshold(); @@ -89,7 +93,7 @@ return [ `${prefixCls}-container`, { - [`${prefixCls}-container-loading`]: this.showBodyLoader + [`${prefixCls}-container-loading`]: this.showBodyLoader && this.stopSlide } ]; },