feat(scroll-view): add method getOffsets (didi#595)

* feat(scroll-view): add method getOffsets * fix(scroll-view): add autoReflow watching for ScrollView display toggle * doc(scroll-view): add additional notes
lily199299 · Oct 18, 2019 · 5694d7f · 5694d7f
1 parent 83bbb01
commit 5694d7f
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 3 deletions.
diff --git a/components/scroll-view/README.en-US.md b/components/scroll-view/README.en-US.md
@@ -32,7 +32,7 @@ Vue.component(ScrollView.name, ScrollView)
 |scrolling-x | horizontal scrolling | Boolean | `true` | -|
 |scrolling-y | vertical scrolling | Boolean | `true` | -|
 |bouncing | - | Boolean | `true` | -|
-|auto-reflow| automatically reset scroller size when content changes | Boolean | `false` | manually call `reflowScroller` when set to `false` |
+|auto-reflow| automatically reset scroller size when content changes | Boolean | `false` | manually call `reflowScroller` when set to `false` and it is recommended to turn `auto-reflow` off when `ScrollView` is hidden, otherwise the last scroll position will not be saved|
 |manual-init | manual initialization | Boolean | `false` | generally used for asynchronous initialization scenarios, you need to manually call the `init` method to complete the initialization |
 |end-reached-threshold | threshold for emitting `endReached`. | Number | 0 | unit `px` |
 |immediate-check-end-reaching <sup class="version-after">2.1.0+</sup>| check if it reaches the bottom at initialization | Boolean | `false` | - |
@@ -104,6 +104,9 @@ Scroll to the specified location
 |top|distance from top|Number|
 |animate|using animation|Boolean|
 
+##### getOffsets(): {left: number, top: number}
+Get scrolling position <sup class="version-after">2.5.4+</sup>
+
 ##### triggerRefresh()
 -
 

diff --git a/components/scroll-view/README.md b/components/scroll-view/README.md
@@ -32,7 +32,7 @@ Vue.component(ScrollView.name, ScrollView)
 |scrolling-x | 水平滚动 | Boolean | `true` | - |
 |scrolling-y | 垂直滚动 | Boolean | `true` | - |
 |bouncing | 可回弹 | Boolean | `true` | -|
-|auto-reflow | 内容发生变化时自动重置滚动区域尺寸 | Boolean | `false` | 当设置为`false`时，内容发生变化需手动调用`reflowScroller` |
+|auto-reflow | 内容发生变化时自动重置滚动区域尺寸 | Boolean | `false` | 当设置为`false`时，内容发生变化需手动调用`reflowScroller`。建议当滚动区域被隐藏时将其关闭，否则会无法保存上次滚动位置。 |
 |manual-init | 手动初始化 | Boolean | `false` | 一般用于异步初始化的场景，需手动调用`init`方法完成初始化 |
 |end-reached-threshold | 触发到达底部的提前量 | Number | 0 | 单位`px` |
 |immediate-check-end-reaching <sup class="version-after">2.1.0+</sup>| 初始化时立即触发是否到达底部检查 | Boolean | `false` | - |
@@ -104,6 +104,9 @@ Vue.component(ScrollView.name, ScrollView)
 |top|距顶部距离|Number|
 |animate|使用动画|Boolean|
 
+##### getOffsets(): {left: number, top: number}
+获取滚动位置 <sup class="version-after">2.5.4+</sup>
+
 ##### triggerRefresh()
 触发下拉刷新
 

diff --git a/components/scroll-view/index.vue b/components/scroll-view/index.vue
@@ -129,13 +129,22 @@ export default {
       return !!(this.$slots.more || this.$scopedSlots.more)
     },
   },
+  watch: {
+    autoReflow(val) {
+      if (val) {
+        this.$_initAutoReflow()
+      } else {
+        this.$_destroyAutoReflow()
+      }
+    },
+  },
   mounted() {
     if (!this.manualInit) {
       this.$_initScroller()
     }
   },
   destroyed() {
-    this.reflowTimer && clearInterval(this.reflowTimer)
+    this.$_destroyAutoReflow()
   },
   methods: {
     $_initScroller() {
@@ -207,10 +216,14 @@ export default {
       }
     },
     $_initAutoReflow() {
+      this.$_destroyAutoReflow()
       this.reflowTimer = setInterval(() => {
         this.reflowScroller()
       }, 100)
     },
+    $_destroyAutoReflow() {
+      this.reflowTimer && clearInterval(this.reflowTimer)
+    },
     $_checkScrollerEnd() {
       if (!this.scroller) {
         return
@@ -371,6 +384,13 @@ export default {
       }
       this.scroller.scrollTo(left, top, animate)
     },
+    getOffsets() {
+      /* istanbul ignore if */
+      if (!this.scroller) {
+        return {left: 0, top: 0}
+      }
+      return this.scroller.getValues()
+    },
     reflowScroller(force = false) {
       const container = this.container
       const content = this.content

diff --git a/components/scroll-view/test/index.spec.js b/components/scroll-view/test/index.spec.js
@@ -69,4 +69,19 @@ describe('ScrollView', () => {
     expect(wrapper.findAll('.scroll-view-more').length > 0).toBe(true)
     wrapper.vm.finishLoadMore()
   })
+
+  it('get offsets', () => {
+    wrapper = mount(ScrollView, {
+      propsData: {
+        autoReflow: true,
+      },
+      slots: {
+        default: ScrollViewContent,
+      },
+    })
+    // const eventStub = sinon.stub(wrapper.vm, '$emit')
+
+    wrapper.vm.init()
+    expect(wrapper.vm.getOffsets().top).toBe(0)
+  })
 })