no message

Former-commit-id: 63f4d371a0260677bd44db8ceb3af004a8373261 [formerly 63f4d371a0260677bd44db8ceb3af004a8373261 [formerly 63f4d371a0260677bd44db8ceb3af004a8373261 [formerly 63f4d371a0260677bd44db8ceb3af004a8373261 [formerly f7182f859150a21635c09cc195c7148601755e5f [formerly 7dd89561de98b79fb315b8f0d74a9b3c929ddf4e]]]]]
Former-commit-id: 2a7c572d32164c0130da45c457dbe4fcac92a6e1
Former-commit-id: 00c962387af18e9da0f79968947afbb8fe2fa232
Former-commit-id: 8ce5585bb9b4929547c39f441d0a3a8684ac9547 [formerly 9658f3b1f02bd0bab471a7d7c0355e99dba1f2fd]
Former-commit-id: 0ebad305d4c39c6c5a4f2ad1b7f37f27710deddd
Former-commit-id: d78960ee0093d1569ac932aefa186124f0ab7201
Former-commit-id: 0f71d88c24af1f5b2ec8cf90ece46f7338fdd73a
Former-commit-id: 485c45130570d9af769afd96e17275cddf6dff6a
Former-commit-id: ab2275efbe91fbc8545a2177d74bf7f850d69d44

src/pages/demo/plugins/better-scroll/base.vue

@@ -1,5 +1,6 @@
 <template>
   <d2-container>
+    <template slot="header">基础用法</template>
     <div ref="wrapper" class="demo-bs-wrapper">
       <div>
         <div v-for="n in 30" :key="n" class="demo-bs-item">n : {{n}}</div>
@@ -17,8 +18,7 @@ export default {
     }
   },
   mounted () {
-    let wrapper = this.$refs.wrapper
-    this.BS = new BScroll(wrapper, {
+    this.BS = new BScroll(this.$refs.wrapper, {
       mouseWheel: true,
       scrollbar: {
         fade: true

src/pages/demo/plugins/better-scroll/to.vue

@@ -0,0 +1,90 @@
+<template>
+  <d2-container type="full">
+    <template slot="header">滚动定位</template>
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <div ref="wrapper" class="demo-bs-wrapper d2-mb">
+          <div>
+            <div v-for="n in 100" :key="n" class="demo-bs-item" :id="`demo-bs-item-${n}`">n : {{n}}</div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="16">
+        <div class="d2-mb">
+          <p>滚动时间 ms</p>
+          <el-slider v-model="time" :min="100" :max="3000"></el-slider>
+        </div>
+        <div class="d2-mb">
+          <el-button-group>
+            <el-button @click="handleScrollTo(100)">滚动到100像素位置</el-button>
+            <el-button @click="handleScrollTo(300)">滚动到300像素位置</el-button>
+          </el-button-group>
+        </div>
+        <div class="d2-mb">
+          <el-button-group>
+            <el-button @click="handleScrollBy(50)">向下滚动50像素</el-button>
+            <el-button @click="handleScrollBy(-50)">向上滚动50像素</el-button>
+          </el-button-group>
+        </div>
+        <div class="d2-mb">
+          <el-button-group>
+            <el-button @click="handleScrollToElement(4)">滚动到第四个</el-button>
+            <el-button @click="handleScrollToElement(14)">滚动到第十四个</el-button>
+            <el-button @click="handleScrollToElement(24)">滚动到第二十四个</el-button>
+          </el-button-group>
+        </div>
+      </el-col>
+    </el-row>
+  </d2-container>
+</template>
+
+<script>
+import BScroll from 'better-scroll'
+export default {
+  data () {
+    return {
+      time: 300,
+      BS: null
+    }
+  },
+  mounted () {
+    this.BS = new BScroll(this.$refs.wrapper, {
+      mouseWheel: true,
+      scrollbar: {
+        fade: true
+      }
+    })
+  },
+  methods: {
+    handleScrollTo (y) {
+      this.BS.scrollTo(0, -y, this.time)
+    },
+    handleScrollBy (y) {
+      this.BS.scrollBy(0, -y, this.time)
+    },
+    handleScrollToElement (n) {
+      this.BS.scrollToElement(`#demo-bs-item-${n}`, this.time)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/style/public.scss';
+.demo-bs-wrapper {
+  height: 400px;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid $color-border-1;
+  border-radius: 4px;
+  .demo-bs-item {
+    line-height: 40px;
+    padding-left: 10px;
+    border-bottom: 1px solid $color-border-4;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+}
+</style>
+