update example

Author: egoist

example/App.vue example/Demo.vueexample/App.vue renamed to example/Demo.vue

@@ -1,9 +1,8 @@
 <template>
   <div id="app">
-    <github></github>
     <h1>vue-mugen-scroll</h1>
     <h2>Infinite scroll component for Vue.js</h2>
-    <div class="wrap" ref="scrollContainer">
+    <div class="wrap" :class="{'can-scroll': scrollableContainer}" ref="scrollContainer">
       <div class="users" v-if="users.length > 0">
         <div class="user" v-for="user in users">
           <img class="avatar" :src="user.avatar_url" height="40" alt="">
@@ -14,7 +13,7 @@
         class="you-can-add-custom-class-name"
         :handler="fetchUsers"
         :should-handle="!loading"
-        scroll-container="scrollContainer">
+        :scroll-container="scrollableContainer && 'scrollContainer'">
         loading <span class="loading dots"></span>
       </mugen-scroll>
     </div>
@@ -27,10 +26,10 @@
   import http from 'axios'
 
   import MugenScroll from '../src'
-  import Github from './Github.vue'
 
   export default {
-    name: 'app',
+    name: 'demo',
+    props: ['scrollableContainer'],
     data() {
       return {
         users: [], count: 0, loading: false
@@ -50,24 +49,13 @@
       }
     },
     components: {
-      MugenScroll,
-      Github
+      MugenScroll
     }
   }
 </script>
 
 <style src="text-spinners/spinners.css"></style>
 <style>
-  body {
-    margin: 0;
-    text-align: center;
-    font-family: -apple-system, BlinkMacSystemFont,
-               'avenir next', avenir,
-               helvetica, 'helvetica neue',
-               Ubuntu,
-               'segoe ui', arial,
-               sans-serif;
-  }
   .users {
     background-color: #f0f0f0;
     .user {
@@ -86,15 +74,14 @@
     background-color: #f0f0f0;
   }
   .count {
-    position: fixed;
-    bottom: 10px;
-    right: 10px;
     font-size: 18px;
+    margin-top: 10px;
   }
   .wrap {
     max-width: 400px;
+  }
+  .wrap.can-scroll {
     height: 300px;
-    margin: 0 auto;
     overflow-y: auto;
   }
 </style>

example/Github.vue

@@ -1,7 +1,68 @@
-import Vue from 'vue'
-import App from './App'
+import Aimer from 'aimer'
+import 'aimer/dist/aimer.css'
 
-new Vue({
-  el: '#app',
-  render: h => h(App)
+import Demo from './Demo.vue'
+
+const aimer = new Aimer({
+  title: 'vue-mugen-scroll',
+  twitter: '_egoistlily',
+  github: 'egoist/vue-mugen-scroll'
+})
+
+aimer.add({
+  title: 'Default',
+  component: Demo,
+  example: `<template>
+  <div id="app">
+    <div class="list">your list of items</div>
+    <!-- add the component right after your list -->
+    <mugen-scroll :handler="fetchData" :should-handle="!loading">
+      loading...
+    </mugen-scroll>
+  </div>
+</template>
+
+<script>
+  import MugenScroll from 'vue-mugen-scroll'
+
+  export default {
+    data() {
+      // do not run handler when it's loading
+      return {loading: false}
+    },
+    methods: {
+      fetchData() {
+        this.loading = true
+        // ... the code you wanna run to fetch data
+        this.loading = false
+      }
+    },
+    components: {MugenScroll}
+  }
+</script>`.trim()
+})
+
+aimer.add({
+  title: 'Scrollable container',
+  component: {
+    render() {
+      return <Demo scrollableContainer={true} />
+    }
+  },
+  example: `<template>
+  <div class="wrap"
+    <!-- the container is scrollable here -->
+    style="height: 200px; overflow: auto;"
+    <!-- add the ref -->
+    ref="wrap">
+    <div class="list"><!-- your list --></div>
+    <mugen-scroll
+      <!-- pass the ref id -->
+      scroll-container="wrap">
+      Loading...
+    </mugen-scroll>
+  </div>
+</template>`.trim()
 })
+
+aimer.start('#app')

example/index.js

@@ -33,6 +33,7 @@
     "component"
   ],
   "devDependencies": {
+    "aimer": "^2.0.8",
     "axios": "^0.16.1",
     "bili": "^0.15.3",
     "eslint-config-rem": "^3.1.0",