diff --git a/src/components/core/d2-container/index.vue b/src/components/core/d2-container/index.vue
index 832402ac..3687d5de 100644
--- a/src/components/core/d2-container/index.vue
+++ b/src/components/core/d2-container/index.vue
@@ -36,6 +36,9 @@ export default {
       default: false
     }
   },
+  mounted () {
+    this.$emit('mounted')
+  },
   components: {
     'd2-container-full': () => import('../d2-container-full/index.vue')
   }
diff --git a/src/pages/demo/plugins/better-scroll/base.vue b/src/pages/demo/plugins/better-scroll/base.vue
index 18d60273..4046e040 100644
--- a/src/pages/demo/plugins/better-scroll/base.vue
+++ b/src/pages/demo/plugins/better-scroll/base.vue
@@ -1,5 +1,40 @@
 <template>
-  <d2-container>
-    base
+  <d2-container @mounted="handleContainerMounted">
+    <div ref="wrapper" class="demo-bs-wrapper">
+      <ul class="content">
+        <li v-for="n in 30" :key="n">n</li>
+      </ul>
+    </div>
   </d2-container>
 </template>
+
+<script>
+import BScroll from 'better-scroll'
+export default {
+  data () {
+    return {
+      BS: null
+    }
+  },
+  methods: {
+    handleContainerMounted () {
+      console.log(this.$refs.wrapper)
+      let wrapper = this.$refs.wrapper
+      this.BS = new BScroll(wrapper, {
+        mouseWheel: true,
+        scrollbar: {
+          fade: true
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.demo-bs-wrapper {
+  height: 200px;
+  position: relative;
+}
+</style>
+