feat(scroll): pulldown style logic (#199)

* [update] scroll pulldown logic

* [update] scroll example

* [update] get pulldown ele height by js

* [update] remove unused code

* [fix]

* updated scroll.vue by review suggest

* update scroll examples

* [update] scroll docs, add introduction for stopTime

* delete earlier scroll example

* [update]{scroll.md} update English document about stopTime and stop

* [update] via review suggest

* [udpate]{example} fix style and replace v-if to v-show

* [udpate] replace promise to callback, and
replace nextTick.then to nextTick, and
repalce class text to cube-pulldown-loaded

document/components/docs/en-US/scroll.md

@@ -196,7 +196,8 @@ In `options`, there are three frequently-used options, `scrollbar`、`pullDownRe
 | Attribute | Description | Type | Accepted Values | Default |
 | - | - | - | - | - |
 | threshold | the threshold of  distance that pulling down for  refreshing | Number | - | 90 |
-| stop | the position where rebounding stays | Number | - | 40 |
+| stop | the position where rebounding stays | Number | - | Scroll component will calculate the height of pulldown element as default `stop` value |
+| stopTime | the time that keep showing the text of refreshing success | Number | - | 600 |
 | txt | the text shown when refreshing successfully | String | - | 'Refresh success' |
 
 - `pullUpLoad` sub configuration

document/components/docs/zh-CN/scroll.md

@@ -213,7 +213,8 @@
 | 参数 | 说明 | 类型 | 可选值 | 默认值 |
 | - | - | - | - | - |
 | threshold | 下拉刷新动作的下拉距离阈值 | Number | - | 90 |
-| stop | 回弹停留的位置 | Number | - | 40 |
+| stop | 回弹停留的位置 | Number | - | 组件会自动计算回弹时显示的元素高度作为默认值 |
+| stopTime | 刷新成功的文案显示时间 | Number | - | 600 |
 | txt | 刷新成功的文案 | String | - | 'Refresh success' |
 
 - `pullUpLoad` 子配置项

example/pages/scroll/config.vue

@@ -10,9 +10,9 @@
             <input-option v-if="pullDownRefresh" class="item sub first" name="threshold (≥ 40)"
                           :value="pullDownRefreshThreshold" min-value="40"
                           @update:value="updatePullDownRefreshThreshold"></input-option>
-            <input-option v-if="pullDownRefresh" class="item sub" name="stop (≥ 40)" :value="pullDownRefreshStop"
+            <!-- <input-option v-if="pullDownRefresh" class="item sub" name="stop (≥ 40)" :value="pullDownRefreshStop"
                           min-value="40"
-                          @update:value="updatePullDownRefreshStop"></input-option>
+                          @update:value="updatePullDownRefreshStop"></input-option> -->
             <input-option v-if="pullDownRefresh" class="item sub" name="txt" :value="pullDownRefreshTxt"
                           @update:value="updatePullDownRefreshTxt"></input-option>
             <switch-option v-if="pullDownRefresh" class="item sub last" name="Custom Animation" :value="customPullDown"
@@ -63,16 +63,16 @@
                   class="cube-pulldown-wrapper"
                   :style="props.pullDownStyle">
                 <div
-                    v-if="props.beforePullDown"
+                    v-show="props.beforePullDown"
                     class="before-trigger"
-                    :style="{paddingTop: props.bubbleY - 10 + 'px'}">
+                    :style="{paddingTop: props.bubbleY + 'px'}">
                   <span :class="{rotate: props.bubbleY > pullDownRefreshThreshold - 40}">↓</span>
                 </div>
-                <div class="after-trigger" v-else>
-                  <div v-if="props.isPullingDown" class="loading">
+                <div class="after-trigger" v-show="!props.beforePullDown">
+                  <div v-show="props.isPullingDown" class="loading">
                     <cube-loading></cube-loading>
                   </div>
-                  <div v-else><span class="refresh-text">Refresh success</span></div>
+                  <div v-show="!props.isPullingDown" class="text"><span class="refresh-text">Refresh success</span></div>
                 </div>
               </div>
             </template>
@@ -129,7 +129,8 @@ export default {
     pullDownRefreshObj: function() {
       return this.pullDownRefresh ? {
         threshold: parseInt(this.pullDownRefreshThreshold),
-        stop: parseInt(this.pullDownRefreshStop),
+        // Do not need to set stop value, but you can if you want
+        // stop: parseInt(this.pullDownRefreshStop),
         txt: this.pullDownRefreshTxt
       } : false
     },
@@ -175,9 +176,9 @@ export default {
     updatePullDownRefreshThreshold(val) {
       this.pullDownRefreshThreshold = val
     },
-    updatePullDownRefreshStop(val) {
-      this.pullDownRefreshStop = val
-    },
+    // updatePullDownRefreshStop(val) {
+    //   this.pullDownRefreshStop = val
+    // },
     updatePullDownRefreshTxt(val) {
       this.pullDownRefreshTxt = val
     },
@@ -211,6 +212,7 @@ export default {
   .cube-pulldown-wrapper 
     .before-trigger 
       font-size: 30px
+      line-height: 30px
       align-self: flex-end
       span 
         display: inline-block

example/pages/scroll/toutiao.vue

@@ -17,7 +17,6 @@
           <cube-scroll
             ref="contentScroll"
             :data="content"
-            :listenScroll="true"
             :options="contentScrollOptions"
             @pulling-down="onPullingDown"
             @pulling-up="onPullingUp">
@@ -34,8 +33,8 @@
                 <div
                     v-if="props.beforePullDown"
                     class="before-trigger"
-                    :style="{paddingTop: props.bubbleY - 10 + 'px'}">
-                  <span :class="{rotate: props.bubbleY > contentScrollOptions.pullDownRefresh.threshold - 50}">↓</span>
+                    :style="{paddingTop: props.bubbleY + 'px'}">
+                  <span :class="{rotate: props.bubbleY > contentScrollOptions.pullDownRefresh.threshold - 60}">↓</span>
                 </div>
                 <div class="after-trigger" v-else>
                   <div v-show="props.isPullingDown" class="loading">
@@ -80,7 +79,7 @@ export default {
       contentScrollOptions: {
         pullDownRefresh: {
           threshold: 60,
-          stop: 44,
+          // stop: 44,
           stopTime: 1000,
           txt: '更新成功'
         },
@@ -179,28 +178,25 @@ export default {
             width: 100%
   .cube-pulldown-wrapper
     text-align: center
-    margin-top: -10px
     .before-trigger
-      margin-top: 10px
       font-size: 30px
       align-self: flex-end
-      span 
+      span
         display: inline-block
         transition: all 0.3s
         color: #666
+        padding: 15px 0
         &.rotate 
           transform: rotate(180deg)
     .after-trigger
       flex: 1
       margin: 0
       .text-wrapper
+        margin: 0 auto
+        margin-top: 14px
         padding: 5px 0
         color: #498ec2
         background-color: #d6eaf8
-        margin: auto
-        margin-top: 14px
-      .loading
-        margin-top: 10px
       .cube-loading-spinners
         margin: auto
   .success-enter-active, .success-leave-active

src/components/scroll/scroll.vue

@@ -23,25 +23,27 @@
         </div>
       </slot>
     </div>
-    <slot
-      name="pulldown"
-      :pullDownRefresh="pullDownRefresh"
-      :pullDownStyle="pullDownStyle"
-      :beforePullDown="beforePullDown"
-      :isPullingDown="isPullingDown"
-      :bubbleY="bubbleY">
-      <div class="cube-pulldown-wrapper" :style="pullDownStyle" v-if="pullDownRefresh">
-        <div class="before-trigger" v-if="beforePullDown">
-          <bubble :y="bubbleY"></bubble>
-        </div>
-        <div class="after-trigger" v-else>
-          <div v-if="isPullingDown" class="loading">
-            <loading></loading>
+    <div v-if="pullDownRefresh" class="cube-pulldown" ref="pulldown">
+      <slot
+        name="pulldown"
+        :pullDownRefresh="pullDownRefresh"
+        :pullDownStyle="pullDownStyle"
+        :beforePullDown="beforePullDown"
+        :isPullingDown="isPullingDown"
+        :bubbleY="bubbleY">
+        <div class="cube-pulldown-wrapper" :style="pullDownStyle">
+          <div class="before-trigger" v-show="beforePullDown">
+            <bubble :y="bubbleY" class="bubble"></bubble>
+          </div>
+          <div class="after-trigger" v-show="!beforePullDown">
+            <div v-show="isPullingDown" class="loading">
+              <loading></loading>
+            </div>
+            <div v-show="!isPullingDown" class="cube-pulldown-loaded"><span>{{ refreshTxt }}</span></div>
           </div>
-          <div v-else><span>{{ refreshTxt }}</span></div>
         </div>
-      </div>
-    </slot>
+      </slot>
+    </div>
   </div>
 </template>
 
@@ -58,7 +60,7 @@
   const DIRECTION_H = 'horizontal'
   const DIRECTION_V = 'vertical'
   const DEFAULT_REFRESH_TXT = 'Refresh success'
-  const PULL_DOWN_ELEMENT_INITIAL_HEIGHT = -50
+  const DEFAULT_STOP_TIME = 600
 
   const EVENT_CLICK = 'click'
   const EVENT_PULLING_DOWN = 'pulling-down'
@@ -125,12 +127,21 @@
         isPullUpLoad: false,
         pullUpDirty: true,
         bubbleY: 0,
-        pullDownStyle: ''
+        pullDownStyle: '',
+        pullDownStop: 40,
+        pullDownHeight: 60
       }
     },
     computed: {
       pullDownRefresh() {
-        return this.options.pullDownRefresh
+        let pullDownRefresh = this.options.pullDownRefresh
+        if (pullDownRefresh === false) {
+          return pullDownRefresh
+        }
+        if (pullDownRefresh === true) {
+          pullDownRefresh = {}
+        }
+        return Object.assign({stop: this.pullDownStop}, pullDownRefresh)
       },
       pullUpLoad() {
         return this.options.pullUpLoad
@@ -235,6 +246,7 @@
         this._listenScrollEvents()
 
         if (this.pullDownRefresh) {
+          this._getPullDownEleHeight()
           this._onPullDownRefresh()
         }
 
@@ -268,7 +280,7 @@
       forceUpdate(dirty = false) {
         if (this.pullDownRefresh && this.isPullingDown) {
           this.isPullingDown = false
-          this._reboundPullDown().then(() => {
+          this._reboundPullDown(() => {
             this._afterPullDown(dirty)
           })
         } else if (this.pullUpLoad && this.isPullUpLoad) {
@@ -313,11 +325,11 @@
       },
       _pullDownScrollHandle(pos) {
         if (this.beforePullDown) {
-          this.bubbleY = Math.max(0, pos.y + PULL_DOWN_ELEMENT_INITIAL_HEIGHT)
-          this.pullDownStyle = `top:${Math.min(pos.y + PULL_DOWN_ELEMENT_INITIAL_HEIGHT, 10)}px`
+          this.bubbleY = Math.max(0, pos.y - this.pullDownHeight)
+          this.pullDownStyle = `top:${Math.min(pos.y - this.pullDownHeight, 0)}px`
         } else {
           this.bubbleY = 0
-          this.pullDownStyle = `top:${Math.min(pos.y - 30, 10)}px`
+          this.pullDownStyle = `top:${Math.min(pos.y - this.pullDownStop, 0)}px`
         }
       },
       _onPullUpLoad() {
@@ -330,18 +342,16 @@
         this.isPullUpLoad = true
         this.$emit(EVENT_PULLING_UP)
       },
-      _reboundPullDown() {
-        const {stopTime = 600} = this.pullDownRefresh
-        return new Promise((resolve) => {
-          setTimeout(() => {
-            this.scroll.finishPullDown()
-            resolve()
-          }, stopTime)
-        })
+      _reboundPullDown(next) {
+        const {stopTime = DEFAULT_STOP_TIME} = this.pullDownRefresh
+        setTimeout(() => {
+          this.scroll.finishPullDown()
+          next()
+        }, stopTime)
       },
       _afterPullDown(dirty) {
         this.resetPullDownTimer = setTimeout(() => {
-          this.pullDownStyle = `top:${PULL_DOWN_ELEMENT_INITIAL_HEIGHT}px`
+          this.pullDownStyle = `top: -${this.pullDownHeight}px`
           this.beforePullDown = true
           dirty && this.refresh()
         }, this.scroll.options.bounceTime)
@@ -351,6 +361,19 @@
         deprecatedKeys.forEach((key) => {
           this[key] && tip(`The property "${kebab(key)}" is deprecated, please use the recommended property "scroll-events" to replace it. Details could be found in https://didi.github.io/cube-ui/#/en-US/docs/scroll#cube-Propsconfiguration-anchor`, COMPONENT_NAME)
         })
+      },
+      _getPullDownEleHeight() {
+        const pulldown = this.$refs.pulldown.firstChild
+        this.pullDownHeight = getRect(pulldown).height
+
+        this.beforePullDown = false
+        this.isPullingDown = true
+        this.$nextTick(() => {
+          this.pullDownStop = getRect(pulldown).height
+
+          this.beforePullDown = true
+          this.isPullingDown = false
+        })
       }
     },
     components: {
@@ -376,8 +399,15 @@
     justify-content: center
     align-items: center
     transition: all
+    .before-trigger
+      height: 54px
+      line-height: 0
+      padding-top: 6px
     .after-trigger
-      margin-top: 5px
+      .loading
+        padding: 8px 0
+      .cube-pulldown-loaded
+        padding: 12px 0
 
   .cube-pullup-wrapper
     width: 100%