返回顶部的方法

Former-commit-id: 3c95b5a5df8c09efda44212256f5063a37f9fbc8 [formerly 3c95b5a5df8c09efda44212256f5063a37f9fbc8 [formerly 3c95b5a5df8c09efda44212256f5063a37f9fbc8 [formerly 3c95b5a5df8c09efda44212256f5063a37f9fbc8 [formerly 7765bde19a0f24f058d187abf04a543de1a701e3 [formerly 6da35f0374891df1c2cf2e27562a1890f68b4045]]]]]
Former-commit-id: d76ca39daa8f2e97e23eada1bbe5f6ee6deb8459
Former-commit-id: 8a0e5b235398aa2bcd4bc313b194ecda4b3ca70c
Former-commit-id: debdb63291e7831e910962793e92a5982eda5262 [formerly ac58f2e8ad837ca633adff21751b90404d948b67]
Former-commit-id: 74b92416979407e855119f8f20e54dc635f186e3
Former-commit-id: 4f943668a9e8989426d1de2bed7c27a875ef7752
Former-commit-id: 06ee2b7121ca1bfea625f2e95dc43f19a7b4987f
Former-commit-id: 8125182559664ee6704d72ac9073eae009eb2e75
Former-commit-id: 39b9b54e3d6e39fafc85f397b8c50d51113173e0

src/components/d2-container/components/mixins/scroll.normal.js

@@ -45,6 +45,17 @@ export default {
     // 移除滚动事件监听
     removeScrollListener () {
       this.$refs.body.removeEventListener('scroll', this.handleScroll)
+    },
+    // 外部调用的方法 返回顶部
+    scrollToTop () {
+      const smoothscroll = () => {
+        var currentScroll = this.$refs.body.scrollTop
+        if (currentScroll > 0) {
+          window.requestAnimationFrame(smoothscroll)
+          this.$refs.body.scrollTo(0, currentScroll - (currentScroll / 5))
+        }
+      }
+      smoothscroll()
     }
   }
 }

src/components/d2-container/index.js

@@ -48,6 +48,7 @@ export default {
       class: 'container-component'
     }, [
       h(this.component, {
+        ref: 'component',
         props: this.$attrs,
         on: {
           scroll: e => this.$emit('scroll', e)
@@ -58,5 +59,11 @@ export default {
         props: this.$attrs
       }) : undefined
     ])
+  },
+  methods: {
+    // 返回顶部
+    scrollToTop () {
+      this.$refs.component.scrollToTop()
+    }
   }
 }

src/pages/demo/components/container/api.vue

@@ -8,16 +8,16 @@
         :inline="true"
         size="mini">
         <el-form-item
-          label="scrollTop"
+          label="滚动距离"
           class="d2-mb-0">
           <el-input
             :value="scrollTop"
-            style="width: 110px;">
+            style="width: 120px;">
             <template slot="append">px</template>
           </el-input>
         </el-form-item>
         <el-form-item
-          label="scrollDelay"
+          label="事件延迟(ms)"
           class="d2-mb-0">
           <el-input-number
             v-model="scrollDelay"
@@ -30,7 +30,7 @@
           <el-button
             v-if="scrollTop >= 55"
             type="primary"
-            @click="handleTop">
+            @click="handleScrollToTop">
             回到顶部
           </el-button>
         </el-form-item>
@@ -38,8 +38,10 @@
     </template>
     <el-alert type="success" title="请向下滚动" center class="d2-mb-10"/>
     <d2-demo-article
-      long
-      :style="articleStyle"/>
+      v-for="i in 10"
+      :key="i"
+      :style="articleStyle"
+      long/>
     <template slot="footer">
       <el-form
         :inline="true"
@@ -81,7 +83,9 @@ export default {
     handleScroll (e) {
       this.scrollTop = e.target.scrollTop
     },
-    handleTop () {},
+    handleScrollToTop () {
+      this.$refs.container.scrollToTop()
+    },
     handleScrollBy () {
       this.$refs.container.$children[0].$refs.body.scrollBy(0, 30)
     },