docs(demo): simple list

Author: Guillaume Chau

docs-src/src/App.vue

@@ -9,6 +9,7 @@
       <router-link :to="{ name: 'recycle' }">Recycle scroller demo</router-link>
       <router-link :to="{ name: 'dynamic' }">Dynamic scroller demo</router-link>
       <router-link :to="{ name: 'test-chat' }">Chat demo</router-link>
+      <router-link :to="{ name: 'simple-list' }">Simple array</router-link>
     </nav>
     <router-view class="page"/>
   </div>

docs-src/src/components/SimpleList.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="dynamic-scroller-demo">
+    <div class="toolbar">
+      <input
+        v-model="search"
+        placeholder="Filter..."
+      >
+
+      <label>
+        <input type="checkbox" v-model="dynamic">
+        Dynamic scroller
+      </label>
+    </div>
+
+    <DynamicScroller
+      v-if="dynamic"
+      :items="filteredItems"
+      :min-item-height="54"
+      class="scroller"
+    >
+      <div
+        slot="before-container"
+        class="notice"
+      >
+        Array of simple strings (no objects).
+      </div>
+
+      <template slot-scope="{ item, index, active }">
+        <DynamicScrollerItem
+          :item="item"
+          :index="index"
+          :active="active"
+          :data-index="index"
+          :data-active="active"
+          class="message"
+        >
+          <div class="text">
+            {{ item }}
+          </div>
+          <div class="index">
+            <span>{{ index }} (index)</span>
+          </div>
+        </DynamicScrollerItem>
+      </template>
+    </DynamicScroller>
+
+    <RecycleScroller
+      v-else
+      :items="filteredItems.map((o, i) => `${i}: ${o.substr(0, 42)}...`)"
+      :item-height="54"
+      class="scroller"
+    >
+      <template slot-scope="{ item, index }">
+        <div class="message">
+          <div class="text">
+            {{ item }}
+          </div>
+          <div class="index">
+            <span>{{ index }} (index)</span>
+          </div>
+        </div>
+      </template>
+    </RecycleScroller>
+  </div>
+</template>
+
+<script>
+import { generateMessage } from '../data'
+
+const items = []
+for (let i = 0; i < 10000; i++) {
+  items.push(generateMessage().message)
+}
+
+export default {
+  data () {
+    return {
+      items,
+      search: '',
+      dynamic: true,
+    }
+  },
+
+  computed: {
+    filteredItems () {
+      const { search, items } = this
+      if (!search) return items
+      const lowerCaseSearch = search.toLowerCase()
+      return items.filter(i => i.toLowerCase().includes(lowerCaseSearch))
+    },
+  },
+}
+</script>
+
+<style scoped>
+.dynamic-scroller-demo,
+.scroller {
+  height: 100%;
+}
+
+.dynamic-scroller-demo {
+  overflow: hidden;
+}
+
+.notice {
+  padding: 24px;
+  font-size: 20px;
+  color: #999;
+}
+
+.message {
+  display: flex;
+  min-height: 32px;
+  padding: 12px;
+  box-sizing: border-box;
+}
+
+.index,
+.text {
+  flex: 1;
+}
+
+.text {
+  max-width: 400px;
+}
+
+.index span {
+  display: inline-block;
+  width: 160px;
+  text-align: right;
+}
+</style>

docs-src/src/router.js

@@ -5,6 +5,7 @@ import Home from './components/Home.vue'
 import Recycle from './components/RecycleScrollerDemo.vue'
 import Dynamic from './components/DynamicScrollerDemo.vue'
 import TestChat from './components/TestChat.vue'
+import SimpleList from './components/SimpleList.vue'
 
 Vue.use(VueRouter)
 
@@ -14,5 +15,6 @@ export default new VueRouter({
     { path: '/recycle', name: 'recycle', component: Recycle },
     { path: '/dynamic', name: 'dynamic', component: Dynamic },
     { path: '/test-chat', name: 'test-chat', component: TestChat },
+    { path: '/simple-list', name: 'simple-list', component: SimpleList },
   ],
 })