feat(scroll): optimise scroll pullup (#482)

* feat(scroll): add pullUpLoad subprops visible

* feat(scroll): enhance forceUpdate

* chore(scroll): update docs and test

* optimise(scroll): using nextElementSubling

* chore(docs): update scroll doc

* chore(unit): update unit test to improve coverage

* chore: fix scroll docs

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

@@ -441,6 +441,9 @@ In `options`, there are three frequently-used options, `scrollbar`、`pullDownRe
 | - | - | - | - | - |
 | threshold | the threshold of  distance that pulling up for  loading | Number | - | 0 |
 | txt | the text shown when pulling up loading | Object | - | { more: '', noMore: '' } |
+| visible<sup>1.13.0</sup> | txt visible or not when content is not more enough | Boolean | true/false | false |
+
+> When pullUpLoad is enabled and the content height is smaller than the container, by default, the copy `pullUpLoad.txt` needs to be pulled up to be seen. If you want to see the prompt copy without pulling up, you can set `pullUpLoad.visible` to `true`。
 
 ### Slot
 
@@ -466,9 +469,9 @@ In `options`, there are three frequently-used options, `scrollbar`、`pullDownRe
 
 | Method Name | Description | Parameters |
 | - | - | - |
-| scrollTo | Scroll to specific position. | x: horizontal position<br> y: vertical position<br> time: transition time<br> ease: easing function |
-| forceUpdate | Mark the end of pull-up or pull-down, and force recalculation of scrollable distance | dirty: whether there is data updating, when "true" indicate data updated so recalculate scrollable distance, when false no data update and no need to recalculate |
-| disable | Disable scroll. | - |
-| enable | Enable scroll. It's enabled by default | - |
-| resetPullUpTxt | Reset pull up txt when pull up state changed from no data to data updated | - |
-| refresh | Refresh, computed height and called BetterScroll instance's refresh | - |
+| scrollTo(x, y, time, ease) | Scroll to specific position. | x: number, horizontal position<br> y: number, vertical position<br> time: number, transition time(ms)<br> ease: easingFn, easing function |
+| forceUpdate(dirty, nomore) | Mark pull-up or pull-down end, force recalculation of scrollable distance | dirty: boolean, default to false, if true express has data update。<br>nomore: boolean, default to false, if true represent has no more data. When params nomore is true, when pullup shows the value of `pullUpLoad.txt.nomore`, but when dirty is false, nomore is invalid.|
+| disable() | Disable scroll. | - |
+| enable() | Enable scroll. It's enabled by default | - |
+| resetPullUpTxt() | Reset pull up txt when pull up state changed from no data to data updated | - |
+| refresh() | Refresh, computed height and called BetterScroll instance's refresh | - |

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

@@ -442,6 +442,9 @@
 | - | - | - | - | - |
 | threshold | 上拉刷新动作的上拉距离阈值 | Number | - | 0 |
 | txt | 上拉加载的相关文案 | Object | - | { more: '', noMore: '' } |
+| visible<sup>1.13.0</sup> | 内容不满一屏时，txt 文案是否可见 | Boolean | true/false | false |
+
+> 当开启 pullUpLoad，且内容较少，内容高度小于容器时，默认情况下，`pullUpLoad.txt` 配置的文案如“上滑加载更多”，需要上拉后才能看到。如果希望无需上拉即可看到提示文案，可以设置 `pullUpLoad.visible` 为 `true`。
 
 ### 插槽
 
@@ -466,12 +469,13 @@
 
 | 方法名 | 说明 | 参数 |
 | - | - | - |
-| scrollTo | 滚动到指定位置 | x: 横向位置<br> y: 纵向位置<br> time: 过渡动画时间<br> ease: 动画曲线 |
-| forceUpdate | 标记上拉下拉结束，强制重新计算可滚动距离 | dirty: 是否有数据更新，默认为 false。true 表示有数据更新重新计算可滚动距离，上拉文案显示`pullUpLoad.text.more`值，false 表示没有数据更新，无需重新计算, 上拉文案显示`pullUpLoad.text.nomore`值 |
-| disable | 禁用滚动 | - |
-| enable | 启用滚动，默认是开启滚动的。 | - |
-| resetPullUpTxt | 当从无更多切换到有更多时，重置上拉文本内容 | - |
-| refresh | 刷新，重新计算高度且刷新 BetterScroll 实例 | - |
+| scrollTo(x, y, time, ease) | 滚动到指定位置 | x: number, 横向位置<br> y: number, 纵向位置<br> time: number, 过渡动画时间 (ms)<br> ease: EasingFn, 缓动曲线 |
+| forceUpdate(dirty, nomore) | 标记上拉下拉结束，强制重新计算可滚动距离 | dirty: boolean, 标识有数据更新，默认为 false。<br>nomore: boolean, pullUpLoad 中标识没有更多数据，默认为 false。当 nomore 为 true 时，上拉加载展示 `pullUpLoad.txt.nomore` 值，但当 dirty 为 false 时，nomore 无效。|
+| disable() | 禁用滚动 | - |
+| enable() | 启用滚动，默认是开启滚动的。 | - |
+| resetPullUpTxt() | 当从无更多切换到有更多时，重置上拉文本内容 | - |
+| refresh() | 刷新，重新计算高度且刷新 BetterScroll 实例 | - |
+
 
 ### 内部属性
 

src/components/scroll/scroll.vue

@@ -148,11 +148,12 @@
         beforePullDown: true,
         isPullingDown: false,
         isPullUpLoad: false,
-        pullUpDirty: true,
+        pullUpNoMore: false,
         bubbleY: 0,
         pullDownStyle: '',
         pullDownStop: 40,
-        pullDownHeight: 60
+        pullDownHeight: 60,
+        pullUpHeight: 0
       }
     },
     computed: {
@@ -175,7 +176,7 @@
         const moreTxt = (txt && txt.more) || ''
         const noMoreTxt = (txt && txt.noMore) || ''
 
-        return this.pullUpDirty ? moreTxt : noMoreTxt
+        return this.pullUpNoMore ? noMoreTxt : moreTxt
       },
       refreshTxt() {
         const pullDownRefresh = this.pullDownRefresh
@@ -206,14 +207,14 @@
             this.scroll.openPullDown(newVal)
             if (!oldVal) {
               this._onPullDownRefresh()
-              this._calculateMinHeight()
+              this._pullDownRefreshChangeHandler()
             }
           }
 
           if (!newVal && oldVal) {
             this.scroll.closePullDown()
             this._offPullDownRefresh()
-            this._calculateMinHeight()
+            this._pullDownRefreshChangeHandler()
           }
         },
         deep: true
@@ -224,14 +225,14 @@
             this.scroll.openPullUp(newVal)
             if (!oldVal) {
               this._onPullUpLoad()
-              this._calculateMinHeight()
+              this._pullUpLoadChangeHandler()
             }
           }
 
           if (!newVal && oldVal) {
             this.scroll.closePullUp()
             this._offPullUpLoad()
-            this._calculateMinHeight()
+            this._pullUpLoadChangeHandler()
           }
         },
         deep: true
@@ -273,12 +274,13 @@
         this._listenScrollEvents()
 
         if (this.pullDownRefresh) {
-          this._getPullDownEleHeight()
           this._onPullDownRefresh()
+          this._pullDownRefreshChangeHandler()
         }
 
         if (this.pullUpLoad) {
           this._onPullUpLoad()
+          this._pullUpLoadChangeHandler()
         }
       },
       disable() {
@@ -304,7 +306,7 @@
       clickItem(item) {
         this.$emit(EVENT_CLICK, item)
       },
-      forceUpdate(dirty = false) {
+      forceUpdate(dirty = false, nomore = false) {
         if (this.pullDownRefresh && this.isPullingDown) {
           this.isPullingDown = false
           this._reboundPullDown(() => {
@@ -313,14 +315,14 @@
         } else if (this.pullUpLoad && this.isPullUpLoad) {
           this.isPullUpLoad = false
           this.scroll.finishPullUp()
-          this.pullUpDirty = dirty
+          this.pullUpNoMore = !dirty || nomore
           dirty && this.refresh()
         } else {
           dirty && this.refresh()
         }
       },
       resetPullUpTxt() {
-        this.pullUpDirty = true
+        this.pullUpNoMore = false
       },
       _listenScrollEvents() {
         this.finalScrollEvents.forEach((event) => {
@@ -406,9 +408,22 @@
         return reachBoundary
       },
       _calculateMinHeight() {
-        if (this.$refs.listWrapper) {
-          this.$refs.listWrapper.style.minHeight = this.pullDownRefresh || this.pullUpLoad ? `${getRect(this.$refs.wrapper).height + 1}px` : 0
+        const { wrapper, listWrapper } = this.$refs
+        const pullUpLoad = this.pullUpLoad
+        const pullDownRefresh = this.pullDownRefresh
+        let minHeight = 0
+
+        if (pullDownRefresh || pullUpLoad) {
+          const wrapperHeight = getRect(wrapper).height
+          minHeight = wrapperHeight + 1
+          if (pullUpLoad && pullUpLoad.visible) {
+            // minHeight = wrapperHeight + 1 - pullUpHeight, then pullUpLoad text is visible
+            // when content's height is not larger than wrapper height
+            minHeight -= this.pullUpHeight
+          }
         }
+
+        listWrapper.style.minHeight = `${minHeight}px`
       },
       _onPullDownRefresh() {
         this.scroll.on('pullingDown', this._pullDownHandle)
@@ -418,6 +433,12 @@
         this.scroll.off('pullingDown', this._pullDownHandle)
         this.scroll.off('scroll', this._pullDownScrollHandle)
       },
+      _pullDownRefreshChangeHandler() {
+        this.$nextTick(() => {
+          this._getPullDownEleHeight()
+          this._calculateMinHeight()
+        })
+      },
       _pullDownHandle() {
         if (this.resetPullDownTimer) {
           clearTimeout(this.resetPullDownTimer)
@@ -435,6 +456,12 @@
           this.pullDownStyle = `top:${Math.min(pos.y - this.pullDownStop, 0)}px`
         }
       },
+      _pullUpLoadChangeHandler() {
+        this.$nextTick(() => {
+          this._getPullUpEleHeight()
+          this._calculateMinHeight()
+        })
+      },
       _onPullUpLoad() {
         this.scroll.on('pullingUp', this._pullUpHandle)
       },
@@ -460,7 +487,11 @@
         }, this.scroll.options.bounceTime)
       },
       _getPullDownEleHeight() {
-        const pulldown = this.$refs.pulldown.firstChild
+        let pulldown = this.$refs.pulldown
+        if (!pulldown) {
+          return
+        }
+        pulldown = pulldown.firstChild
         this.pullDownHeight = getRect(pulldown).height
 
         this.beforePullDown = false
@@ -471,6 +502,15 @@
           this.beforePullDown = true
           this.isPullingDown = false
         })
+      },
+      _getPullUpEleHeight() {
+        const listWrapper = this.$refs.listWrapper
+        const pullup = listWrapper.nextElementSibling
+        if (!pullup) {
+          this.pullUpHeight = 0
+          return
+        }
+        this.pullUpHeight = getRect(pullup).height
       }
     },
     components: {

test/unit/specs/scroll.spec.js

@@ -172,7 +172,8 @@ describe('Scroll', () => {
             txt: {
               more: 'more',
               noMore: 'noMore'
-            }
+            },
+            visible: true
           }
         }
       },
@@ -203,11 +204,11 @@ describe('Scroll', () => {
           .to.be.callCount(1)
 
         // test: forceUpdate
-        vm.forceUpdate()
+        vm.forceUpdate(true, true)
 
         setTimeout(() => {
           expect(vm.isPullUpLoad).to.be.false
-          expect(vm.pullUpDirty).to.be.false
+          expect(vm.pullUpNoMore).to.be.true
 
           const pullUpTxtElm = vm.$el.querySelector('.cube-pullup-wrapper span')
           expect(pullUpTxtElm.textContent).to.equal('noMore')