Update desc

Author: tangbc

example/src/App.vue

@@ -45,6 +45,6 @@ body {
 }
 
 code {
-  background-color: gold !important;
+  background-color: pink !important;
 }
 </style>

example/src/views/dynamic-size/Code.vue

@@ -9,7 +9,7 @@
 const html =
 `
 <virtual-list class="list"
-  :size="80" // Just pass a estimate size.
+  :size="80" // just assign a estimate value.
   :keeps="30"
   :data-key="'id'"
   :data-sources="items"
@@ -23,7 +23,7 @@ import Item from './Item'
 const items = [
   {
     id: 'unique-id-xxx',
-    ...item props
+    ...
   },
   ....
 ]

example/src/views/dynamic-size/Main.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="example">
     <github-corner />
-    <introduction description="The size of each item is dynamic." />
+    <introduction description="The size of each item is dynamic, you don't have to care about size, it will calculate automatic, but you have to make sure that there's an unique id for every array data." />
 
     <div class="example-content">
       <tab v-on:tab-change="onTabChange" />

example/src/views/fixed-size/Code.vue

@@ -9,7 +9,7 @@
 const html =
 `
 <virtual-list class="list"
-  :size="60"
+  :size="60" // just assign a estimate value.
   :keeps="30"
   :data-key="'id'"
   :data-sources="items"
@@ -23,7 +23,7 @@ import Item from './Item'
 const items = [
   {
     id: 'unique-id-xxx',
-    ...item props
+    ...
   },
   ....
 ]

example/src/views/horizontal/Code.vue

@@ -9,12 +9,11 @@
 const html =
 `
 <virtual-list class="list-horizontal"
-  :size="110"
+  :size="110" // just assign a estimate value.
   :keeps="30"
-  :direction="'horizontal'"
+  :direction="'horizontal'" // make scroll direction in horizontal.
   :wrap-class="'wrapper'"
   :item-class="'list-item-horizontal'"
-
   :data-key="'id'"
   :data-sources="items"
   :data-component="itemComponent"

example/src/views/horizontal/Main.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="example">
     <github-corner />
-    <introduction description="The size of each item is dynamic." />
+    <introduction description="Set <code>direction</code> as <code>horizontal</code>, and also can use <code>wrap-class</code>, <code>item-class</code> to help you layout items in horizontal." />
 
     <div class="example-content">
       <tab v-on:tab-change="onTabChange" />

example/src/views/infinite-loading/Code.vue

@@ -14,17 +14,19 @@ const html =
   :data-key="'id'"
   :data-sources="items"
   :data-component="itemComponent"
-  v-on:tobottom="onScrollToBottom"
-/>
+  v-on:tolower="onScrollToBottom"
+>
+  <div slot="footer" class="loading-spinner">Loading ...</div>
+</virtual-list>
 `
 
 const js =
 `
 export default {
   data () {
     return {
-      items: getPageData(pageSize, 0),
       itemComponent: Item,
+      items: getPageData(pageSize, 0)
     }
   },
 

example/src/views/infinite-loading/Main.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="example">
     <github-corner />
-    <introduction description="The size of each item is dynamic." />
+    <introduction description="Use <code>v-on:tobottom</code> to listen scroll reach bottom, add a footer slot as loading, then append next parts data into <code>data-sources</code> array." />
 
     <div class="example-content">
       <tab v-on:tab-change="onTabChange" />

example/src/views/keep-state/Code.vue

@@ -2,17 +2,46 @@
   <div>
     <div class="title">This example source code please refer to:</div>
     <p><a v-bind:href="href" target="_blank">{{ href }}</a></p>
+
+    <div>Here provide a common child-to-parent dispatch mixins code:</div>
+    <code-high-light type="js" :code="mixin" />
   </div>
 </template>
 
 <script>
 import getCodeUrl from '../../common/get-code-url'
 
+const mixinCode =
+`
+export default {
+  methods: {
+    dispatch (componentName, eventName, ...rest) {
+      let parent = this.$parent || this.$root
+      let name = parent.$options.name
+
+      while (parent && (!name || name !== componentName)) {
+        parent = parent.$parent
+        if (parent) {
+          name = parent.$options.name
+        }
+      }
+
+      if (parent) {
+        parent.$emit.apply(parent, [eventName].concat(rest))
+      }
+    }
+  }
+}
+`
+
 export default {
   name: 'keep-state-code',
 
   data () {
-    return { href: '' }
+    return {
+      href: '',
+      mixin: mixinCode
+    }
   },
 
   mounted () {

example/src/views/keep-state/Main.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="example">
     <github-corner />
-    <introduction description="The size of each item is equal." />
+    <introduction description="Maintaining item component inner state is a trouble here, recommend to use only props data." />
 
     <div class="example-content">
       <tab v-on:tab-change="onTabChange" />