基本完成

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/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>