diff --git a/src/core/view/components/scroll-view/index.vue b/src/core/view/components/scroll-view/index.vue index 585cc6d3d0ea9b54c0fc1523766da0c940e25c22..bf493e694cbe604c5f350c30c8fca2325f4b9e64 100644 --- a/src/core/view/components/scroll-view/index.vue +++ b/src/core/view/components/scroll-view/index.vue @@ -21,7 +21,7 @@ ref="refresherinner" :style="{ 'background-color': refresherBackground, - height: refresherHeight + 'px', + height: refresherThreshold + 'px', }" class="uni-scroll-view-refresher" > @@ -158,13 +158,13 @@ export default { }, data () { return { - lastScrollTop: this.scrollTopNumber, - lastScrollLeft: this.scrollLeftNumber, + lastScrollTop: this.scrollTopNumber || 0, + lastScrollLeft: this.scrollLeftNumber || 0, lastScrollToUpperTime: 0, lastScrollToLowerTime: 0, refresherHeight: 0, refreshRotate: 0, - refreshState: '' + refreshState: 'restore' } }, computed: { @@ -225,7 +225,6 @@ export default { var x = event.touches[0].pageX var y = event.touches[0].pageY var main = self.$refs.main - if (Math.abs(x - touchStart.x) > Math.abs(y - touchStart.y)) { // 横向滑动 if (self.scrollX) { @@ -246,10 +245,13 @@ export default { } else { // 纵向滑动 if (self.scrollY) { - if (main.scrollTop === 0 && y > touchStart.y) { + if (main.scrollTop === 0 && y >= touchStart.y) { needStop = false // 刷新时,阻止页面滚动 if (self.refresherEnabled && event.cancelable !== false) { + if (self.refreshState !== 'pulling' && self.refreshState !== 'refreshing') { + self.refreshState = 'pulling' + } event.preventDefault() } } else if ( @@ -265,42 +267,71 @@ export default { needStop = false } } - if (needStop) { event.stopPropagation() } - - if (main.scrollTop === 0 && event.touches.length === 1) { - // 如果容器滑动到达顶端,则进入下拉状态 - self.refreshState = 'pulling' + // 刷新中 + if (self.refresherEnabled && self.refreshState === 'refreshing') { + if (event.cancelable !== false) { + event.preventDefault() + } + // this.refresherThreshold + let dy = y - touchStart.y + self.refresherThreshold + if (dy <= 0) { + dy = 0 + // 刷新时,阻止页面滚动 + } + if (dy > self.refresherThreshold) { + self.refresherHeight = Math.floor(dy * 0.16) + self.refresherThreshold + } else { + self.refresherHeight = dy + } + const transform = 'translateY(' + self.refresherHeight + 'px) translateZ(0)' + self.$refs.content.style.transform = transform + self.$refs.content.style.webkitTransform = transform + // return } - + let _dy = 0 if (self.refresherEnabled && self.refreshState === 'pulling') { + if (event.cancelable !== false) { + event.preventDefault() + } const dy = y - touchStart.y if (self.toUpperNumber === 0) { self.toUpperNumber = y } if (!self.beforeRefreshing) { - self.refresherHeight = y - self.toUpperNumber + _dy = y - self.toUpperNumber // 之前为刷新状态则不再触发pulling - if (self.refresherHeight > 0) { + if (_dy > 0) { self.triggerAbort = true self.$trigger('refresherpulling', event, { deltaY: dy }) } } else { - self.refresherHeight = dy + self.refresherThreshold + _dy = dy + self.refresherThreshold // 如果之前在刷新状态,则不触发刷新中断 self.triggerAbort = false } + self.refresherHeight = Math.floor(_dy * 0.16) + if (self.refresherHeight <= 0) { + self.refresherHeight = 0 + } + + const transform = 'translateY(' + self.refresherHeight + 'px) translateZ(0)' + self.$refs.content.style.transform = transform + self.$refs.content.style.webkitTransform = transform + const route = self.refresherHeight / self.refresherThreshold self.refreshRotate = (route > 1 ? 1 : route) * 360 } } this.__handleTouchStart = function (event) { + self.$refs.content.style.transition = '' + self.$refs.content.style.webkitTransition = '' if (event.touches.length === 1) { disableScrollBounce({ disable: true @@ -316,8 +347,21 @@ export default { disableScrollBounce({ disable: false }) + if (self.refreshState === 'refreshing' && self.refresherHeight < self.refresherThreshold) { + self._setRefreshState('restore') + return + } if (self.refresherHeight >= self.refresherThreshold) { - self._setRefreshState('refreshing') + if (self.refreshState !== 'refreshing') { + self._setRefreshState('refreshing') + } else { + const transform = 'translateY(' + self.refresherThreshold + 'px) translateZ(0)' + self.$refs.content.style.transition = 'transform .3s ease-out' + self.$refs.content.style.webkitTransition = + '-webkit-transform .3s ease-out' + self.$refs.content.style.transform = transform + self.$refs.content.style.webkitTransform = transform + } } else { self._setRefreshState('refresherabort') } @@ -633,6 +677,13 @@ export default { } break } + const transform = 'translateY(' + this.refresherHeight + 'px) translateZ(0)' + this.$refs.content.style.transition = 'transform .3s ease-out' + this.$refs.content.style.webkitTransition = + '-webkit-transform .3s ease-out' + this.$refs.content.style.transform = transform + this.$refs.content.style.webkitTransform = transform + this.refreshState = state }, getScrollPosition () { @@ -667,12 +718,16 @@ uni-scroll-view[hidden] { } .uni-scroll-view-content { + position: relative; width: 100%; height: 100%; } .uni-scroll-view-refresher { - position: relative; + position: absolute; + left: 0; + right: 0; + transform: translateY(-100%); overflow: hidden; }