Update Master

.babelrc

@@ -1,5 +1,5 @@
 {
     "presets": [
-        ["env", { "modules": false }]
+        ["@babel/preset-env"]
     ]
-}
+}

.eslintrc.json

@@ -1,20 +1,37 @@
 {
-    "extends": "standard",
+    "extends": [
+        "standard",
+        "plugin:vue/recommended"
+    ],
     "env": {
         "browser": true,
         "amd": true
     },
+    "globals": {
+        "it": "readonly",
+        "expect": "readonly",
+        "describe": "readonly"
+    },
     "parserOptions": {
         "ecmaVersion": 5,
         "sourceType": "module"
     },
     "rules": {
         "indent": ["error", 4],
-        // allow paren-less arrow functions
         "arrow-parens": 0,
-        // allow async-await
         "generator-star-spacing": 0,
-        // disallow trailing whitespace at the end of lines
-        "no-trailing-spaces": [0, { "skipBlankLines": true }]
+        "no-trailing-spaces": [ 0, { "skipBlankLines": true } ],
+        "vue/html-indent": ["error", 4, {
+            "baseIndent": 0,
+            "alignAttributesVertically": false
+        }],
+        "vue/script-indent": ["error", 4],
+        "vue/max-attributes-per-line": ["error", {
+            "singleline": 10,
+            "multiline": {
+                "max": 10,
+                "allowFirstLine": true
+            }
+        }]
     }
 }

.gitignore

@@ -1,4 +1,7 @@
 dev
 node_modules
 npm-debug.log
-examples/**/*.map
+coverage
+demos/dev/
+demos/dev*/
+demos/**/*.map

.travis.yml

@@ -0,0 +1,10 @@
+language: node_js
+node_js:
+  - 8
+script:
+  - npm run ci
+branches:
+  only:
+    - master
+after_success:
+  - bash <(curl -s https://codecov.io/bash)

demos/common/Corner.vue

@@ -0,0 +1,40 @@
+<template>
+<a :href="url" class="github-corner" aria-label="View source on GitHub">
+    <svg :width="size" :height="size" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0; z-index: 1000;" aria-hidden="true">
+        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
+        <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" style="transform-origin: 130px 106px;" fill="currentColor" class="octo-arm" />
+        <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body" />
+    </svg>
+</a>
+</template>
+
+<script>
+import { isMobile } from './util'
+
+export default {
+    name: 'GithubCorner',
+
+    props: {
+        path: {
+            type: String,
+            default: ''
+        }
+    },
+
+    data () {
+        return {
+            size: isMobile ? 40 : 80
+        }
+    },
+
+    computed: {
+        url () {
+            return `https://github.com/tangbc/vue-virtual-scroll-list/tree/master/demos` + (this.path || '')
+        }
+    }
+}
+</script>
+
+<style>
+.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
+</style>

demos/common/Header.vue

@@ -0,0 +1,249 @@
+<template>
+<header :class="warning ? 'warning': ''">
+    <h1>{{ title }}</h1>
+    <section>
+        <span class="desciption">{{ desciption }}</span>
+        <span id="time" class="performance time" />
+        <span id="memory" class="performance memory" />
+        <div class="icon" :class="showSetting ? 'active' : ''" @click="clickIcon">
+            <svg width="25" height="25" t="1553394278598" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8690" xmlns:xlink="http://www.w3.org/1999/xlink">
+                <path d="M809.21 474.749H374.022c-19.865 0-35.966 16.101-35.966 35.966 0 19.859 16.101 35.966 35.966 35.966H809.21c19.865 0 35.966-16.107 35.966-35.966 0-19.864-16.101-35.966-35.966-35.966m0 215.796H374.022c-19.865 0-35.966 16.101-35.966 35.966 0 19.859 16.101 35.966 35.966 35.966H809.21c19.865 0 35.966-16.107 35.966-35.966 0-19.865-16.101-35.966-35.966-35.966M220.52 258.954c-19.865 0-35.966 16.101-35.966 35.966 0 19.865 16.101 35.966 35.966 35.966s35.966-16.101 35.966-35.966c0-19.865-16.102-35.966-35.966-35.966m153.502 71.932H809.21c19.865 0 35.966-16.101 35.966-35.966 0-19.865-16.101-35.966-35.966-35.966H374.022c-19.865 0-35.966 16.101-35.966 35.966 0 19.864 16.102 35.966 35.966 35.966M220.52 474.749c-19.865 0-35.966 16.101-35.966 35.966 0 19.859 16.101 35.966 35.966 35.966s35.966-16.107 35.966-35.966c0-19.864-16.102-35.966-35.966-35.966m0 215.796c-19.865 0-35.966 16.101-35.966 35.966 0 19.859 16.101 35.966 35.966 35.966s35.966-16.107 35.966-35.966c0-19.865-16.102-35.966-35.966-35.966" p-id="8691" fill="#2c2c2c" />
+            </svg>
+        </div>
+        <div v-show="showSetting" class="setting">
+            <div v-if="showStart" class="option">
+                <span v-if="isMobile" class="name">Index:</span>
+                <span v-else class="name">Start index:</span>
+                <input v-model="selfStartIndex" type="text"
+                    @focus="$event.target.select()"
+                    @input="inputDataChange('start', $event.target.value)"
+                >
+            </div>
+
+            <div class="option">
+                <span v-if="isMobile" class="name">Count:</span>
+                <span v-else class="name">List count:</span>
+                <label>
+                    <input v-model="renderCount" type="radio" value="1">
+                    <span class="t1">1,000</span>
+                </label>
+                <label class="middle">
+                    <input v-model="renderCount" type="radio" value="2">
+                    <span class="t2">10,000</span>
+                </label>
+                <label>
+                    <input v-model="renderCount" type="radio" value="3">
+                    <span class="t3">100,000</span>
+                </label>
+            </div>
+        </div>
+    </section>
+</header>
+</template>
+
+<script>
+import { isMobile, debounce, countStorage, settingStorage } from './util'
+
+export default {
+    name: 'AppHeader',
+
+    props: {
+        warning: Boolean,
+        title: {
+            type: String,
+            default: ''
+        },
+        desciption: {
+            type: String,
+            default: ''
+        },
+        startIndex: {
+            type: Number,
+            default: 0
+        },
+        onDataChange: {
+            type: Function,
+            default: () => {}
+        }
+    },
+
+    data () {
+        return {
+            isMobile,
+            selfStartIndex: 0,
+            showSetting: settingStorage.isShow(),
+            renderCount: String(countStorage.get()).length - 3
+        }
+    },
+
+    computed: {
+        showStart () {
+            return this.startIndex !== undefined
+        },
+
+        isRenderSetting () {
+            return this.showSetting && (this.showStart)
+        }
+    },
+
+    watch: {
+        renderCount (val) {
+            countStorage.set(val)
+            window.location.reload()
+        }
+    },
+
+    mounted () {
+        this.selfStartIndex = this.startIndex
+    },
+
+    methods: {
+        clickIcon () {
+            const nextStatus = !this.showSetting
+            this.showSetting = nextStatus
+            settingStorage.setShow(nextStatus)
+        },
+
+        inputDataChange: debounce(function (type, value) {
+            const val = Number(value)
+            if (this.onDataChange && value !== '' && !isNaN(val) && val >= 0) {
+                this.onDataChange(type, val)
+            }
+        }, 1000, false)
+    }
+}
+</script>
+
+<style lang="less">
+header {
+    font-family: monospace;
+    h1 {
+        padding: 20px 0;
+        @media (max-width: 640px) {
+            padding: 10px 0;
+            font-size: 24px;
+        }
+    }
+    section {
+        font-size: 14px;
+        background: #f7f7f7;
+        padding: 10px;
+        margin-bottom: 20px;
+        border-radius: 5px;
+        position: relative;
+        .performance {
+            color: #ee82ee;
+            position: absolute;
+            right: 50px;
+            font-size: 12px;
+            @media (max-width: 640px) {
+                display: block;
+                position: relative;
+                right: 0;
+                padding-top: 5px;
+            }
+        }
+        .memory {
+            top: 18px;
+            @media (max-width: 640px) {
+                display: block;
+                position: relative;
+                right: 0;
+                padding-top: 5px;
+                top: 0;
+            }
+        }
+        .time {
+            top: 5px;
+        }
+        .icon {
+            width: 25px;
+            height: 25px;
+            line-height: 25px;
+            text-align: center;
+            position: absolute;
+            right: 10px;
+            top: 5px;
+            cursor: pointer;
+            border-radius: 3px;
+            &.active {
+                background-color: #c0c0c0;
+            }
+        }
+        .setting {
+            position: relative;
+            padding: 30px 0 20px 20px;
+            @media (max-width: 640px) {
+                padding: 20px 0 20px 0px;
+            }
+            .option {
+                display: block;
+                margin-bottom: 20px;
+                &:last-child {
+                    margin: 0;
+                }
+                .name {
+                    font-family: 'Courier New', Courier, monospace;
+                    font-weight: bold;
+                    display: inline-block;
+                    min-width: 120px;
+                    text-align: left;
+                    @media (max-width: 640px) {
+                        min-width: 50px;
+                    }
+                }
+                .middle {
+                    margin: 0 20px;
+                    @media (max-width: 640px) {
+                        margin: 0;
+                    }
+                }
+                label {
+                    input {
+                        @media (max-width: 640px) {
+                            position: relative;
+                            top: 3px;
+                        }
+                    }
+                    span {
+                        @media (max-width: 640px) {
+                            position: relative;
+                            left: -5px;
+                        }
+                    }
+                }
+            }
+            i {
+                position: absolute;
+                right: 0;
+                color: lightsteelblue;
+                font-size: 12px;
+            }
+            input[type="text"] {
+                -webkit-appearance: none;
+                appearance: none;
+                padding: 5px;
+                outline: none;
+                color: #464a4c;
+                background-color: #fff;
+                border-radius: 3px;
+                border: 1px solid rgba(0, 0, 0, .15);
+                font-size: 14px;
+                transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+                &:focus {
+                    outline: 0;
+                    border-color: #5cb3fd;
+                }
+            }
+        }
+    }
+}
+header.warning {
+    h1, .desciption {
+        color: #ffc107;
+    }
+    .t3 {
+        color: red;
+    }
+}
+</style>