build demo

Author: KyLeoHC

.gitignore

@@ -2,3 +2,4 @@
 node_modules/
 npm-debug*
 .idea/
+onlineDemo/

README.md

@@ -15,13 +15,17 @@ $ npm install vue-scroll-list --save-dev
 ```
 
 ## Demos
-on the road...
+
+[infinite data](http://freeui.org/vue-scroll-list/)
 
 ## Usage
 
 ```html
 <template>
     <div id="app">
+        <h2>vue-scroll-list with infinite data</h2>
+        <h3>random height</h3>
+        <h4>total: {{count}}</h4>
         <ul>
             <scroll-list
                     :heights="heightList"
@@ -30,9 +34,9 @@ on the road...
                     @toBottom="onBottom"
                     @scrolling="onScroll">
                 <li v-for="(item, index) in list"
-                    :key="item.name"
-                    :style="{height: item.itemHeight + 'px'}">
-                    {{item.name}}/{{item.price}}/{{item.itemHeight}}
+                    :key="item.index"
+                    :style="{height: item.itemHeight + 'px', 'line-height': item.itemHeight + 'px'}">
+                    index:{{item.index}} / height:{{item.itemHeight}}
                 </li>
             </scroll-list>
         </ul>
@@ -55,38 +59,55 @@ on the road...
         },
         methods: {
             onTop() {
-                console.log('page to top.');
+                console.log('[demo]:page to top.');
             },
             onBottom() {
-                console.log('page to bottom.');
-                this.createData();
+                console.log('[demo]:page to bottom.');
+                !window.__stopLoadData && this.createData();
             },
             onScroll(event) {
-                console.log(event);
+                window.__showScrollEvent && console.log(event);
             },
             createData() {
-                let size = 40;
+                let size = window.__createSize || 40;
                 this.count += size;
                 for (let i = this.count - size; i < this.count; i++) {
-                    let itemHeight = Math.random() > 0.5 ? 40 : 100;
+                    let itemHeight = Math.round(Math.random() * 100) + 40;
                     this.list.push({
-                        name: 'name-' + i,
-                        price: Math.floor(Math.random() * 1000),
+                        index: i,
                         itemHeight: itemHeight
                     });
                     this.heightList.push(itemHeight);
                 }
+                console.log('[demo]:' + size + ' items are created.')
             }
         },
         created() {
+            window.__createSize = 40;
+            window.__stopLoadData = false;
+            window.__showScrollEvent = false;
             this.createData();
         }
     };
 </script>
 <style scoped>
+    #app {
+        text-align: center;
+    }
+
     ul {
-        border: 1px solid #eee;
         height: 400px;
+        padding: 0;
+        border: 1px solid #eee;
+    }
+
+    li {
+        border-bottom: 1px solid #eee;
+        overflow: hidden;
+    }
+
+    li:last-child {
+        border-bottom: 0;
     }
 
     .scroll-container {

dist/vue-scroll-list.js

@@ -53,6 +53,7 @@ var component = {
             var delta = this.$options.delta;
             var overs = this.findOvers(offset);
 
+            // scroll to top
             if (!offset && delta.total) {
                 this.$emit('toTop');
             }
@@ -63,7 +64,7 @@ var component = {
                 return a + b;
             });
 
-            // console.log(offset, this.$el.clientHeight, totalHeight);
+            // scroll to bottom
             if (offset && offset + this.$el.clientHeight >= totalHeight) {
                 start = delta.total - delta.keeps;
                 end = delta.total - 1;

example/App.vue

@@ -1,5 +1,8 @@
 <template>
     <div id="app">
+        <h2>vue-scroll-list with infinite data</h2>
+        <h3>random height</h3>
+        <h4>total: {{count}}</h4>
         <ul>
             <scroll-list
                     :heights="heightList"
@@ -8,9 +11,9 @@
                     @toBottom="onBottom"
                     @scrolling="onScroll">
                 <li v-for="(item, index) in list"
-                    :key="item.name"
-                    :style="{height: item.itemHeight + 'px'}">
-                    {{item.name}}/{{item.price}}/{{item.itemHeight}}
+                    :key="item.index"
+                    :style="{height: item.itemHeight + 'px', 'line-height': item.itemHeight + 'px'}">
+                    index:{{item.index}} / height:{{item.itemHeight}}
                 </li>
             </scroll-list>
         </ul>
@@ -33,38 +36,62 @@
         },
         methods: {
             onTop() {
-                console.log('page to top.');
+                console.log('[demo]:page to top.');
             },
             onBottom() {
-                console.log('page to bottom.');
-                this.createData();
+                console.log('[demo]:page to bottom.');
+                !window.__stopLoadData && this.createData();
             },
             onScroll(event) {
-                console.log(event);
+                window.__showScrollEvent && console.log(event);
             },
             createData() {
-                let size = 40;
+                let size = window.__createSize || 40;
                 this.count += size;
                 for (let i = this.count - size; i < this.count; i++) {
-                    let itemHeight = Math.random() > 0.5 ? 40 : 100;
+                    let itemHeight = Math.round(Math.random() * 100) + 40;
                     this.list.push({
-                        name: 'name-' + i,
-                        price: Math.floor(Math.random() * 1000),
+                        index: i,
                         itemHeight: itemHeight
                     });
                     this.heightList.push(itemHeight);
                 }
+                console.log('[demo]:' + size + ' items are created.')
+            },
+            logSomeInfo() {
+                console.log('%cThere are some useful variables in window object:', 'color: green');
+                console.log('%c- `__createSize`: the number of items are created every time.', 'color: green');
+                console.log('%c- `__stopLoadData`: set true to stop loading data when the page is on bottom.', 'color: green');
+                console.log('%c- `__showScrollEvent`: set true to show scroll event.', 'color: green');
             }
         },
         created() {
+            window.__createSize = 40;
+            window.__stopLoadData = false;
+            window.__showScrollEvent = false;
             this.createData();
+            this.logSomeInfo();
         }
     };
 </script>
 <style scoped>
+    #app {
+        text-align: center;
+    }
+
     ul {
-        border: 1px solid #eee;
         height: 400px;
+        padding: 0;
+        border: 1px solid #eee;
+    }
+
+    li {
+        border-bottom: 1px solid #eee;
+        overflow: hidden;
+    }
+
+    li:last-child {
+        border-bottom: 0;
     }
 
     .scroll-container {

example/index.html

@@ -2,10 +2,10 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>test&example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <title>vue-scroll-list</title>
 </head>
 <body>
 <div id="app"></div>
-<script src="/build/index.js"></script>
 </body>
 </html>

package.json

@@ -8,7 +8,8 @@
   },
   "scripts": {
     "dist": "rollup -c",
-    "dev": "webpack-dev-server --config webpack.config.js --open --inline --hot"
+    "buildDemo": "webpack --config webpack.config.demo.js",
+    "dev": "webpack-dev-server --config webpack.config.dev.js --open --inline --hot"
   },
   "repository": {
     "type": "git",
@@ -26,9 +27,18 @@
   },
   "homepage": "https://github.com/KyLeoHC/vue-scroll-list#readme",
   "devDependencies": {
+    "babel-core": "^6.25.0",
+    "babel-loader": "^7.1.0",
     "babel-plugin-external-helpers": "^6.22.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-es2015": "^6.24.1",
+    "babel-runtime": "^6.23.0",
     "css-loader": "^0.28.4",
+    "css-select": "^1.3.0-rc0",
+    "html-webpack-plugin": "^2.28.0",
+    "htmlparser2": "^3.9.2",
+    "pretty-error": "^2.1.1",
+    "renderkid": "^2.0.1",
     "rollup": "^0.43.0",
     "rollup-plugin-babel": "^2.7.1",
     "vue": "^2.3.4",

webpack.config.js webpack.config.base.jswebpack.config.js renamed to webpack.config.base.js

@@ -5,11 +5,6 @@ let config = {
     entry: {
         index: './example/index'
     },
-    output: {
-        path: path.resolve(__dirname, 'build'),
-        publicPath: '/build/',
-        filename: '[name].js'
-    },
     resolve: {
         extensions: ['.js', '.vue'],
         alias: {
@@ -23,15 +18,28 @@ let config = {
                 test: /\.vue$/,
                 loader: 'vue-loader',
                 options: {}
+            },
+            {
+                test: /\.js$/,
+                exclude: /node_modules/,
+                use: [
+                    {
+                        loader: 'babel-loader'
+                    }
+                ]
             }
         ]
     },
-    devServer: {
-        contentBase: './example',
-        host: '0.0.0.0',
-        port: '8686',
-        noInfo: true
-    }
+    plugins: [
+        new webpack.LoaderOptionsPlugin({
+            options: {
+                babel: {
+                    presets: ['es2015'],
+                    plugins: ['transform-runtime']
+                }
+            }
+        })
+    ]
 };
 
 module.exports = config;

webpack.config.demo.js

@@ -0,0 +1,41 @@
+const path = require('path');
+const webpack = require('webpack');
+const baseConfig = require('./webpack.config.base');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+baseConfig.output = {
+    path: path.resolve(__dirname, 'onlineDemo'),
+    publicPath: '/vue-scroll-list/',
+    filename: '[name].[hash].js',
+    sourceMapFilename: '[file].map'
+};
+
+baseConfig.plugins.push(
+    new webpack.DefinePlugin({
+        'process.env': {
+            NODE_ENV: '"production"'
+        }
+    })
+);
+
+baseConfig.plugins.push(
+    new webpack.optimize.UglifyJsPlugin({
+        compress: {
+            warnings: false
+        },
+        comments: false,
+        sourceMap: true
+    })
+);
+
+baseConfig.plugins.push(
+    new HtmlWebpackPlugin({
+        title: 'vue-scroll-list',
+        template: 'example/index.html',
+        filename: 'index.html'
+    })
+);
+
+baseConfig.devtool = 'source-map';
+
+module.exports = baseConfig;

webpack.config.dev.js

@@ -0,0 +1,26 @@
+const path = require('path');
+const webpack = require('webpack');
+const baseConfig = require('./webpack.config.base');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+baseConfig.output = {
+    path: path.resolve(__dirname, 'build'),
+    publicPath: '/',
+    filename: '[name].js'
+};
+
+baseConfig.plugins.push(
+    new HtmlWebpackPlugin({
+        title: 'vue-scroll-list',
+        template: 'example/index.html',
+        filename: 'index.html'
+    })
+);
+
+baseConfig.devServer = {
+    host: '0.0.0.0',
+    port: '8686',
+    noInfo: true
+};
+
+module.exports = baseConfig;