基本完成

Former-commit-id: f40914e76c91b828299b7aeb5b56337d641d0d74 [formerly f40914e76c91b828299b7aeb5b56337d641d0d74 [formerly f40914e76c91b828299b7aeb5b56337d641d0d74 [formerly f40914e76c91b828299b7aeb5b56337d641d0d74 [formerly f59ab0339a7fad79340308948667b1254e7de250 [formerly d7e13b40b46a808a25524433cae68e95db6a98b1]]]]]
Former-commit-id: 9a2c521f0be4ffbbc715f337880168b40a352488
Former-commit-id: f0526a5e139ac2523e5cf1a9eccb83b121065d05
Former-commit-id: e80ccfb84a5cd9dd64d844999afa7ee1e0e1985b [formerly f77fec8cc261483da122e06c4d6454007eb3877a]
Former-commit-id: 98cf5fd060753ccd960d7fdb9ac8246393da3890
Former-commit-id: 57ef44f6a5bb191f3f2584849f6c4fac835e409a
Former-commit-id: 52173964469c5e6c308ac7d9a91990dab580b2c7
Former-commit-id: 9211b978a4bf1493974cbe59befd946f7c516b66
Former-commit-id: 30ac26684644764d096e4664e15d67c15c184ac5

src/components/d2-container/components/mixins/bs.js

@@ -21,6 +21,7 @@ export default {
   },
   methods: {
     scrollInit () {
+      // 初始化 bs
       this.BS = new BScroll(this.$refs.wrapper, Object.assign({
         mouseWheel: true,
         scrollbar: {
@@ -28,6 +29,11 @@ export default {
           interactive: false
         }
       }, this.betterScrollOptions))
+      // 滚动时发出事件 并且统一返回的数据格式
+      this.BS.on('scroll', ({x, y}) => this.$emit('scroll', {
+        x: -x,
+        y: -y
+      }))
     },
     scrollDestroy () {
       // https://github.com/d2-projects/d2-admin/issues/75
@@ -37,6 +43,19 @@ export default {
         delete this.BS
         this.BS = null
       }
+    },
+    // 外部调用的方法 返回顶部
+    scrollToTop () {
+      if (this.BS) this.BS.scrollTo(0, 0, 300)
+    },
+    // 手动发出滚动事件
+    scroll () {
+      if (this.BS) {
+        this.$emit('scroll', {
+          x: -this.BS.x,
+          y: -this.BS.y
+        })
+      }
     }
   }
 }

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

@@ -5,7 +5,12 @@ import { throttle } from 'lodash'
 
 // 生成滚动事件的 handler
 function handleMaker (wait) {
-  return throttle(e => this.$emit('scroll', e), wait)
+  return throttle(e => {
+    this.$emit('scroll', {
+      x: e.target.scrollLeft,
+      y: e.target.scrollTop
+    })
+  }, wait)
 }
 
 export default {
@@ -14,7 +19,7 @@ export default {
     scrollDelay: {
       type: Number,
       required: false,
-      default: 100
+      default: 10
     }
   },
   data () {

src/components/d2-container/index.js

@@ -64,18 +64,48 @@ export default {
     // 返回顶部
     scrollToTop () {
       this.$refs.component.scrollToTop()
+      // 如果开启了 better scroll 还需要手动触发一遍 scroll 事件
+      const bs = this.$refs.component.BS
+      if (bs) this.$refs.component.scroll()
     },
     // 用法同原生方法 scrollBy
-    scrollBy (x = 0, y = 0) {
-      this.$refs.component.$refs.body.scrollBy(x, y)
+    scrollBy (x = 0, y = 0, time = 300) {
+      if (this.betterScroll) {
+        const bs = this.$refs.component.BS
+        if (bs) {
+          bs.scrollBy(-x, -y, time)
+          // 手动触发一遍 scroll 事件
+          this.$refs.component.scroll()
+        }
+      } else {
+        this.$refs.component.$refs.body.scrollBy(x, y)
+      }
     },
     // 用法同原生方法 scrollTo
-    scrollTo (x = 0, y = 0) {
-      this.$refs.component.$refs.body.scrollTo(x, y)
+    scrollTo (x = 0, y = 0, time = 300) {
+      if (this.betterScroll) {
+        const bs = this.$refs.component.BS
+        if (bs) {
+          bs.scrollTo(-x, -y, time)
+          // 手动触发一遍 scroll 事件
+          this.$refs.component.scroll()
+        }
+      } else {
+        this.$refs.component.$refs.body.scrollTo(x, y)
+      }
     },
     // 用法同原生方法 scrollTop
-    scrollTop (top = 0) {
-      this.$refs.component.$refs.body.scrollTop = top
+    scrollTop (top = 0, time = 300) {
+      if (this.betterScroll) {
+        const bs = this.$refs.component.BS
+        if (bs) {
+          bs.scrollTo(bs.x, -top, time)
+          // 手动触发一遍 scroll 事件
+          this.$refs.component.scroll()
+        }
+      } else {
+        this.$refs.component.$refs.body.scrollTop = top
+      }
     }
   }
 }

src/menu/modules/demo-components.js

@@ -36,7 +36,8 @@ export default {
         {
           title: '方法',
           children: [
-            { path: `${pre}container/api`, title: 'API' }
+            { path: `${pre}container/api?bs=false`, title: '滚动控制' },
+            { path: `${pre}container/api?bs=true`, title: '滚动控制 BS' }
           ]
         }
       ]

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

@@ -2,8 +2,9 @@
   <d2-container
     ref="container"
     :type="containerType"
+    :better-scroll="betterScroll"
     :scroll-delay="scrollDelay"
-    @scroll="e => { scrollTop = e.target.scrollTop }">
+    @scroll="({x, y}) => { scrollTop = y }">
     <template slot="header">
       <el-form
         :inline="true"
@@ -27,11 +28,12 @@
           </el-input>
         </el-form-item>
         <el-form-item
+          v-if="!betterScroll"
           label="事件延迟(ms)"
           class="d2-mb-0">
           <el-input-number
             v-model="scrollDelay"
-            :min="100"
+            :min="10"
             :max="2000"
             :step="100"
             style="width: 110px;"/>
@@ -48,7 +50,7 @@
     </template>
     <el-alert
       type="success"
-      title="请向下滚动"
+      :title="`${betterScroll ? '此示例开启了 BetterScroll ' : ''}请向下滚动`"
       class="d2-mb-10"
       center/>
     <d2-demo-article
@@ -83,26 +85,21 @@ export default {
   data () {
     return {
       containerType: 'full',
-      scrollDelay: 100,
+      scrollDelay: 10,
       scrollTop: 0
     }
   },
   computed: {
+    // 是否开启 better scroll
+    betterScroll () {
+      return this.$route.query.bs === 'true'
+    },
+    // 根据滚动位置返回文章的样式
     articleStyle () {
       return {
         opacity: this.scrollTop > 55 ? '1' : '.1'
       }
     }
-  },
-  watch: {
-    containerType (val, oldVal) {
-      let top = this.scrollTop
-      // 因为 ghost 模式下的容器没有 20px 的 padding
-      // 为了保持垂直位置 需要重新计算定位高度
-      if (oldVal === 'ghost') top += 20
-      if (val === 'ghost') top -= 20
-      this.$nextTick(() => this.$refs.container.scrollTo(0, top))
-    }
   }
 }
 </script>