fix(h5): scroll-view 优化下拉刷新，增加下拉动画

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;
 }