├── .babelrc
├── .gitignore
├── README.md
├── build
    ├── dev-server.js
    ├── utils.js
    ├── webpack.config.base.js
    ├── webpack.config.dev.js
    ├── webpack.config.example.js
    └── webpack.config.prod.js
├── dist
    └── vue-infinite-auto-scroll.min.js
├── example-src
    ├── App.vue
    ├── components
    │   └── index.vue
    ├── index.js
    ├── router.js
    └── template.html
├── example
    ├── example.js
    └── index.html
├── package-lock.json
├── package.json
└── src
    ├── components
        └── vue-infinite-auto-scroll.vue
    └── index.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     ["env"]
4 |   ],
5 |   "comments": false
6 | }
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | npm-debug.log
3 | test
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-infinite-auto-scroll
 2 | > 基于vue.js的无缝自动滚动的插件，可添加无限数据而不卡顿
 3 | 
 4 | ## 内容
 5 | 
 6 | - [**`浏览器兼容性`**](#浏览器兼容性)
 7 | - [**`功能特性`**](#功能特性)
 8 | - [**`安装`**](#安装)
 9 | - [**`使用`**](#使用)
10 | - [**`案例`**](#使用)
11 | - [**`配置项默认值`**](#配置项默认值)   
12 | - [**`个别特殊配置项说明`**](#个别特殊配置项说明)
13 | - [**`历史版本`**](#历史版本)
14 | - [**`注意`**](#注意)
15 | - [**`贡献`**](#贡献)
16 | 
17 | ## 浏览器兼容性
18 | | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/edge.png" alt="IE" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/firefox.png" alt="Firefox" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/chrome.png" alt="Chrome" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/safari.png" alt="Safari" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/safari-ios.png" alt="iOS Safari" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>iOS | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/chrome-android.png" alt="Chrome for Android" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>Android |
19 | |:---------:|:---------:|:---------:|:---------:|:---------:|:---------:|
20 | | IE9+ | &check;| &check; | &check; | &check; | &check; | &check;
21 | 
22 | ## 功能特性
23 | * [x] 基于requestAnimationFrame实现
24 | * [x] 配置多满足多样需求
25 | * [x] 目前支持上下无缝滚动
26 | * [x] 持续维护迭代
27 | * [x] 可暂停或重新开始
28 | 
29 | ## 安装
30 | 
31 | ### NPM
32 | 
33 | ```bash
34 | npm install vue-infinite-auto-scroll --save
35 | ```
36 | 
37 | ## 使用
38 | 
39 | ```js
40 | // **main.js**
41 | // 1.全局 install
42 | import Vue from 'vue'
43 | import scroll from 'vue-infinite-auto-scroll'
44 | Vue.use(scroll)
45 | 
46 | // 或者你可以自己设置全局注册的组件名 默认注册的组件名是 vue-infinite-auto-scroll
47 | Vue.use(scroll,{componentName: 'vue-infinite-auto-scroll'})
48 | 
49 | // 2.单个.vue文件局部注册
50 | <script>
51 |   import vueInfiniteAutoScroll from 'vue-infinite-auto-scroll'
52 |    export default {
53 |       components: {
54 |         vueInfiniteAutoScroll
55 |       }
56 |    }
57 | </script>
58 | ```
59 | 
60 | ## 案例
61 | 
62 | 请查看[**`example`**](https://github.com/wanls4583/vue-infinite-auto-scroll/tree/master/example-src)
63 | 
64 | [**`online demo`**](https://blog.lisong.hn.cn/code/example/vue-infinite-auto-scroll/index.html#/index)
65 | 
66 | ## 配置项
67 | 
68 | |key|description|default|val|
69 | |:---|---|---|---|
70 | |`speed`|数值越大速度滚动越快|`1`|`Number`|
71 | |`force`|是否强制滚动，如果为ture，则即使列表小于容器高度，也将循环滚动|`false`|`Number`|
72 | |`once`|是否只滚动一次|`false`|`Boolean`|
73 | |`newFirst`|动态新增的数据是否优先显示，为true时将打乱显示的顺序|`false`|`Boolean`|
74 | 
75 | 
76 | ## 个别特殊配置项说明
77 | 
78 | > 1.最外层容器需要手动设置`width height overflow:hidden`
79 | 
80 | 
81 | ## 历史版本
82 | 
83 | See the GitHub [历史版本](https://github.com/wanls4583/vue-infinite-auto-scroll/releases).
84 | 
85 | 
86 | ## 贡献
87 | 
88 | 欢迎给出一些意见和优化，期待你的 `Pull Request`


--------------------------------------------------------------------------------
/build/dev-server.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var express = require('express');
 3 | var webpack = require('webpack');
 4 | var webpackConfig = require('./webpack.config.dev.js');
 5 | 
 6 | // 创建一个express实例
 7 | var app = express()
 8 | 
 9 | // 动态向入口配置中注入 webpack-hot-middleware/client
10 | var devClient = 'webpack-hot-middleware/client';
11 | Object.keys(webpackConfig.entry).forEach(function (name, i) {
12 |     var extras = [devClient]
13 |     webpackConfig.entry[name] = extras.concat(webpackConfig.entry[name])
14 | })
15 | 
16 | // 调用webpack并把配置传递过去
17 | var compiler = webpack(webpackConfig);
18 | 
19 | // 使用 webpack-dev-middleware 中间件
20 | var devMiddleware = require('webpack-dev-middleware')(compiler, {
21 |     publicPath: '/',
22 |     stats: {
23 |         colors: true,
24 |         chunks: false
25 |     }
26 | })
27 | 
28 | var hotMiddleware = require('webpack-hot-middleware')(compiler)
29 | 
30 | // webpack插件，监听html文件改变事件
31 | compiler.plugin('compilation', function (compilation) {
32 |     compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
33 |         // 发布事件
34 |         hotMiddleware.publish({ action: 'reload' })
35 |         cb()
36 |     })
37 | })
38 | 
39 | // 注册中间件
40 | app.use(devMiddleware)
41 | // 注册中间件
42 | app.use(hotMiddleware)
43 | 
44 | // app.use(express.static(path.join(__dirname, '/dist')));
45 | 
46 | // 监听 8888端口，开启服务器
47 | app.listen(8888, function (err) {
48 |     if (err) {
49 |         console.log(err)
50 |         return
51 |     }
52 |     console.log('Listening at http://localhost:8888')
53 | })


--------------------------------------------------------------------------------
/build/utils.js:
--------------------------------------------------------------------------------
1 | let path = require('path');
2 | module.exports={
3 | 	resolve: function(dir) {
4 | 	    return path.join(__dirname, '..', dir);
5 | 	}
6 | }


--------------------------------------------------------------------------------
/build/webpack.config.base.js:
--------------------------------------------------------------------------------
 1 | let utils = require('./utils');
 2 | 
 3 | module.exports = {
 4 |     resolve: {
 5 |         modules: [
 6 |             utils.resolve('src'),
 7 |             utils.resolve('node_modules')
 8 |         ],
 9 |         alias: {
10 |             src: 'src'
11 |         },
12 |         extensions: ['.js', '.json', '.vue']
13 |     },
14 |     module: {
15 |         rules: [{
16 |                 test: /\.vue$/,
17 |                 loader: 'vue-loader',
18 |                 options: {
19 |                     loaders: {
20 |                         'scss': 'style-loader!css-loader!sass-loader',
21 |                         'sass': 'style-loader!css-loader!sass-loader'
22 |                     }
23 |                 }
24 |             },
25 |             {
26 |                 test: /\.js$/,
27 |                 loader: 'babel-loader',
28 |                 exclude: /node_modules/
29 |             },
30 |             {
31 |                 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
32 |                 loader: 'url-loader',
33 |                 options: {
34 |                     limit: 10000,
35 |                     name: '[name].[ext]'
36 |                 }
37 |             }
38 |         ]
39 |     }
40 | }


--------------------------------------------------------------------------------
/build/webpack.config.dev.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var path = require('path');
 3 | var merge = require('webpack-merge');
 4 | var HtmlWebpackPlugin = require('html-webpack-plugin');
 5 | var webpackBaseConfig = require('./webpack.config.base');
 6 | var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
 7 | var utils = require('./utils');
 8 | 
 9 | webpackBaseConfig = merge(webpackBaseConfig,{
10 |     devtool: '#cheap-module-eval-source-map',
11 |     entry: {example: utils.resolve('example-src/index.js')},
12 |     output: {
13 |         path: utils.resolve('example'),
14 |         filename: '[name].js'
15 |     },
16 |     plugins: [
17 |         //HotModule 插件在页面进行变更的时候只会重回对应的页面模块，不会重绘整个 html 文件
18 |         //需要配合webpack-hot-middleware一起使用
19 |         new webpack.HotModuleReplacementPlugin(),
20 |         //在编译出现错误时，使用 NoEmitOnErrorsPlugin 来跳过输出阶段。这样可以确保输出资源不会包含错误
21 |         new webpack.NoEmitOnErrorsPlugin(),
22 |         // HMR shows correct file names in console on update.
23 |         new webpack.NamedModulesPlugin(),
24 |         //用于更友好地输出webpack的警告、错误等信息
25 |         new FriendlyErrorsPlugin(),
26 |         new HtmlWebpackPlugin({
27 |             template: utils.resolve('example-src/template.html')
28 |         })
29 |     ]
30 | })
31 | 
32 | module.exports = webpackBaseConfig;


--------------------------------------------------------------------------------
/build/webpack.config.example.js:
--------------------------------------------------------------------------------
 1 | let webpackBase = require('./webpack.config.base');
 2 | let utils = require('./utils');
 3 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 4 | const merge = require('webpack-merge');
 5 | 
 6 | const config = merge(webpackBase,{
 7 | 	entry: utils.resolve('example-src/index.js'),
 8 |     output: {
 9 |         path: utils.resolve('example'),
10 |         filename: 'example.js',
11 |     },
12 |     plugins: [
13 |     	new HtmlWebpackPlugin({
14 |     		template: utils.resolve('example-src/template.html')
15 |     	})
16 |     ]
17 | })
18 | module.exports = config;


--------------------------------------------------------------------------------
/build/webpack.config.prod.js:
--------------------------------------------------------------------------------
 1 | let webpackBase = require('./webpack.config.base');
 2 | let utils = require('./utils');
 3 | const merge = require('webpack-merge');
 4 | const webpack = require('webpack')
 5 | const version = require('../package.json').version
 6 | 
 7 | const config = merge(webpackBase,{
 8 | 	entry: utils.resolve('src/index.js'),
 9 |     output: {
10 |         path: utils.resolve('dist'),
11 |         filename: 'vue-infinite-auto-scroll.min.js',
12 |         library: 'vueInfiniteAutoScroll',
13 |         // libraryExport和libraryTarget必须，否则vue导入时报template undefined错误
14 |         libraryExport: 'default',
15 |         libraryTarget: 'umd'
16 |     },
17 |     resolve: {
18 |         alias: {
19 |             vue$: 'vue/dist/vue.common.js'
20 |         }
21 |     },
22 |     plugins: [
23 |         new webpack.DefinePlugin({
24 |             'process.env': {
25 |                 NODE_ENV: '"production"'
26 |             },
27 |             VERSION: JSON.stringify(version)
28 |         }),
29 |         new webpack.optimize.UglifyJsPlugin({
30 |             sourceMap: false,
31 |             compress: {
32 |                 warnings: false,
33 |                 drop_debugger: true,
34 |                 drop_console: true
35 |             }
36 |         })
37 |     ]
38 | })
39 | 
40 | module.exports = config;


--------------------------------------------------------------------------------
/dist/vue-infinite-auto-scroll.min.js:
--------------------------------------------------------------------------------
1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.vueInfiniteAutoScroll=e():t.vueInfiniteAutoScroll=e()}("undefined"!=typeof self?self:this,function(){return function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=0)}([function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(1),o=function(t){return t&&t.__esModule?t:{default:t}}(r);o.default.install=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};t.component(e.componentName||o.default.name,o.default)},"undefined"!=typeof window&&window.Vue&&Vue.component(o.default.name,o.default),e.default=o.default},function(t,e,n){n(2);var r=n(7)(n(8),n(9),null,null);r.options.__file="D:\\github\\vue-infinite-auto-scroll\\src\\components\\vue-infinite-auto-scroll.vue",r.esModule&&Object.keys(r.esModule).some(function(t){return"default"!==t&&"__esModule"!==t}),r.options.functional,t.exports=r.exports},function(t,e,n){var r=n(3);"string"==typeof r&&(r=[[t.i,r,""]]);var o={hmr:!0};o.transform=void 0,o.insertInto=void 0;n(5)(r,o);r.locals&&(t.exports=r.locals)},function(t,e,n){e=t.exports=n(4)(!1),e.push([t.i,"\nul,\nli {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.infinite-warp {\n  overflow: hidden;\n}\n",""])},function(t,e){function n(t,e){var n=t[1]||"",o=t[3];if(!o)return n;if(e&&"function"==typeof btoa){var i=r(o);return[n].concat(o.sources.map(function(t){return"/*# sourceURL="+o.sourceRoot+t+" */"})).concat([i]).join("\n")}return[n].join("\n")}function r(t){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t))))+" */"}t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var r=n(e,t);return e[2]?"@media "+e[2]+"{"+r+"}":r}).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},o=0;o<this.length;o++){var i=this[o][0];"number"==typeof i&&(r[i]=!0)}for(o=0;o<t.length;o++){var s=t[o];"number"==typeof s[0]&&r[s[0]]||(n&&!s[2]?s[2]=n:n&&(s[2]="("+s[2]+") and ("+n+")"),e.push(s))}},e}},function(t,e,n){function r(t,e){for(var n=0;n<t.length;n++){var r=t[n],o=h[r.id];if(o){o.refs++;for(var i=0;i<o.parts.length;i++)o.parts[i](r.parts[i]);for(;i<r.parts.length;i++)o.parts.push(u(r.parts[i],e))}else{for(var s=[],i=0;i<r.parts.length;i++)s.push(u(r.parts[i],e));h[r.id]={id:r.id,refs:1,parts:s}}}}function o(t,e){for(var n=[],r={},o=0;o<t.length;o++){var i=t[o],s=e.base?i[0]+e.base:i[0],a=i[1],l=i[2],c=i[3],u={css:a,media:l,sourceMap:c};r[s]?r[s].parts.push(u):n.push(r[s]={id:s,parts:[u]})}return n}function i(t,e){var n=y(t.insertInto);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");var r=w[w.length-1];if("top"===t.insertAt)r?r.nextSibling?n.insertBefore(e,r.nextSibling):n.appendChild(e):n.insertBefore(e,n.firstChild),w.push(e);else if("bottom"===t.insertAt)n.appendChild(e);else{if("object"!=typeof t.insertAt||!t.insertAt.before)throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n");var o=y(t.insertInto+" "+t.insertAt.before);n.insertBefore(e,o)}}function s(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t);var e=w.indexOf(t);e>=0&&w.splice(e,1)}function a(t){var e=document.createElement("style");return void 0===t.attrs.type&&(t.attrs.type="text/css"),c(e,t.attrs),i(t,e),e}function l(t){var e=document.createElement("link");return void 0===t.attrs.type&&(t.attrs.type="text/css"),t.attrs.rel="stylesheet",c(e,t.attrs),i(t,e),e}function c(t,e){Object.keys(e).forEach(function(n){t.setAttribute(n,e[n])})}function u(t,e){var n,r,o,i;if(e.transform&&t.css){if(!(i=e.transform(t.css)))return function(){};t.css=i}if(e.singleton){var c=g++;n=b||(b=a(e)),r=f.bind(null,n,c,!1),o=f.bind(null,n,c,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=l(e),r=d.bind(null,n,e),o=function(){s(n),n.href&&URL.revokeObjectURL(n.href)}):(n=a(e),r=p.bind(null,n),o=function(){s(n)});return r(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;r(t=e)}else o()}}function f(t,e,n,r){var o=n?"":r.css;if(t.styleSheet)t.styleSheet.cssText=C(e,o);else{var i=document.createTextNode(o),s=t.childNodes;s[e]&&t.removeChild(s[e]),s.length?t.insertBefore(i,s[e]):t.appendChild(i)}}function p(t,e){var n=e.css,r=e.media;if(r&&t.setAttribute("media",r),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}function d(t,e,n){var r=n.css,o=n.sourceMap,i=void 0===e.convertToAbsoluteUrls&&o;(e.convertToAbsoluteUrls||i)&&(r=x(r)),o&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");var s=new Blob([r],{type:"text/css"}),a=t.href;t.href=URL.createObjectURL(s),a&&URL.revokeObjectURL(a)}var h={},v=function(t){var e;return function(){return void 0===e&&(e=t.apply(this,arguments)),e}}(function(){return window&&document&&document.all&&!window.atob}),m=function(t){return document.querySelector(t)},y=function(t){var e={};return function(t){if("function"==typeof t)return t();if(void 0===e[t]){var n=m.call(this,t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(t){n=null}e[t]=n}return e[t]}}(),b=null,g=0,w=[],x=n(6);t.exports=function(t,e){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");e=e||{},e.attrs="object"==typeof e.attrs?e.attrs:{},e.singleton||"boolean"==typeof e.singleton||(e.singleton=v()),e.insertInto||(e.insertInto="head"),e.insertAt||(e.insertAt="bottom");var n=o(t,e);return r(n,e),function(t){for(var i=[],s=0;s<n.length;s++){var a=n[s],l=h[a.id];l.refs--,i.push(l)}if(t){r(o(t,e),e)}for(var s=0;s<i.length;s++){var l=i[s];if(0===l.refs){for(var c=0;c<l.parts.length;c++)l.parts[c]();delete h[l.id]}}}};var C=function(){var t=[];return function(e,n){return t[e]=n,t.filter(Boolean).join("\n")}}()},function(t,e){t.exports=function(t){var e="undefined"!=typeof window&&window.location;if(!e)throw new Error("fixUrls requires window.location");if(!t||"string"!=typeof t)return t;var n=e.protocol+"//"+e.host,r=n+e.pathname.replace(/\/[^\/]*$/,"/");return t.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,function(t,e){var o=e.trim().replace(/^"(.*)"$/,function(t,e){return e}).replace(/^'(.*)'$/,function(t,e){return e});if(/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(o))return t;var i;return i=0===o.indexOf("//")?o:0===o.indexOf("/")?n+o:r+o.replace(/^\.\//,""),"url("+JSON.stringify(i)+")"})}},function(t,e){t.exports=function(t,e,n,r){var o,i=t=t||{},s=typeof t.default;"object"!==s&&"function"!==s||(o=t,i=t.default);var a="function"==typeof i?i.options:i;if(e&&(a.render=e.render,a.staticRenderFns=e.staticRenderFns),n&&(a._scopeId=n),r){var l=Object.create(a.computed||null);Object.keys(r).forEach(function(t){var e=r[t];l[t]=function(){return e}}),a.computed=l}return{esModule:o,exports:i,options:a}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"scroller",data:function(){return{listData:[],copyData:[],dataLength:0,store:[],stroeLastIndex:-1}},props:{data:{type:Array,default:function(){return[]}},option:{type:Object,default:function(){return{}}}},created:function(){window.scrollerCount=window.scrollerCount||0,window.scrollerCount++,this.scrollerClass="scroller"+window.scrollerCount,this.wrapClass="infinite-warp"+window.scrollerCount,this.copyData=this.data.slice(0,this.data.length),this.dataLength=this.data.length,this.force=this.option.force||!1,this.speed=this.option.speed||1,this.once=this.option.once||!1,this.newFirst=this.option.newFirst||!1},mounted:function(){this.scroll()},methods:{scroll:function(){var t=this,e=document.querySelector("."+t.wrapClass),n=document.querySelector("."+t.scrollerClass);if(this.scroller=n,n){var r=t.getComputedTranslateY(n),o=n.querySelectorAll("li");if(n.scrollHeight>Math.abs(r)+e.clientHeight)n.style="transform: translate3d(0px, "+(r-t.speed)+"px, 0px);";else{var i=[],s=0;i=t.copyData.splice(0,1),s=i.length,t.newFirst?t.store=i.concat(t.store):i.length&&t.store.splice(0,0,i[0]),s&&(i=t.store.splice(0,1),t.store=t.store.concat(i)),s||t.once||!(t.force||!t.force&&o.length&&t.data.length*o[0].clientHeight>e.clientHeight)||(i=t.store.splice(0,1),t.store=t.store.concat(i)),i.forEach(function(e){t.$set(t.listData,t.listData.length,e)})}if(n&&o.length){var a=o[0].clientHeight,l=Math.abs(r)/a>>0;l>5&&(t.listData.splice(0,l),n.style="transform: translate3d(0px, "+r%a+"px, 0px);")}window.cancelAnimationFrame(this.timer),this.timer=window.requestAnimationFrame(function(){t.scroll()}),this.stoped=!1}},getComputedTranslateY:function(t){var e=0,n=window.getComputedStyle?window.getComputedStyle(t,null):t.currentStyle,r=n.transform;return r&&"none"!=r&&(e=Number(r.replace(/matrix\(|\)/g,"").split(",")[5])),e},stop:function(){window.cancelAnimationFrame(this.timer),this.stoped=!0},start:function(){var t=this;this.stop(),this.timer=window.requestAnimationFrame(function(){t.scroll()})},refresh:function(t){t=this.data||t,this.copyData=t.concat([]),this.store=[],this.listData=[],this.scroller.style="transform: translate3d(0px, 0px, 0px);",this.copyData.length&&this.scroll()}},watch:{data:{handler:function(t,e){t!=e?this.refresh(t):t.length>this.dataLength?this.copyData=this.copyData.concat(t.slice(this.dataLength,t.length)):0==t.length&&this.refresh([]),this.dataLength=t.length},deep:!0}}}},function(t,e,n){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"infinite-warp",class:t.wrapClass},[n("ul",{staticClass:"scroller",class:t.scrollerClass},t._l(t.listData,function(e){return n("li",[t._t("default",null,{item:e})],2)}),0)])},staticRenderFns:[]},t.exports.render._withStripped=!0}]).default});


--------------------------------------------------------------------------------
/example-src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<keep-alive>
 3 |       <transition name="fade" mode="out-in">
 4 |         <router-view></router-view>
 5 |       </transition>
 6 |     </keep-alive>
 7 | </template>
 8 | <script type="text/javascript">
 9 | 	export default{
10 | 		name: 'app',
11 | 		data(){
12 | 			return{
13 | 
14 | 			}
15 | 		}
16 | 	}
17 | </script>


--------------------------------------------------------------------------------
/example-src/components/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="wrap">
  3 |     	<div class="item">
  4 | 	        <scroller :data="listData1" class="scroller-wrap">
  5 | 	            <template slot-scope="props">
  6 | 	                <span v-text="props.item.txt"></span>
  7 | 	            </template>
  8 | 	        </scroller>
  9 | 	        <div class="option">
 10 | 	        	<span style="color:#3e76f6">默认值</span>
 11 | 	        </div>
 12 |     	</div>
 13 |     	<div class="item">
 14 | 	        <scroller :data="listData2" :option="{force:true}" class="scroller-wrap" key="s1">
 15 | 	            <template slot-scope="props">
 16 | 	                <span v-text="props.item.txt"></span>
 17 | 	            </template>
 18 | 	        </scroller>
 19 | 	        <div class="option">
 20 | 	        	<span style="color:#3e76f6">option{force:true}</span><span style="color:green"></span>
 21 | 	        </div>
 22 |     	</div>
 23 |     	<div class="item">
 24 | 	        <scroller :data="listData3" :option="{once:true}" class="scroller-wrap" key="s2">
 25 | 	            <template slot-scope="props">
 26 | 	                <span v-text="props.item.txt"></span>
 27 | 	            </template>
 28 | 	        </scroller>
 29 | 	        <div class="option">
 30 | 	        	<span style="color:#3e76f6">option{once:true}</span><span style="color:green"></span>
 31 | 	        </div>
 32 |     	</div>
 33 |     	<div class="item">
 34 | 	        <scroller ref="scroller4" :data="listData4" :option="{newFirst:true}" class="scroller-wrap" key="s3">
 35 | 	            <template slot-scope="props">
 36 | 	                <span v-text="props.item.txt"></span>
 37 | 	            </template>
 38 | 	        </scroller>
 39 | 	        <div class="option">
 40 | 	        	<span style="color:#3e76f6">option{newFirst:true}</span><span style="color:green"></span>
 41 | 	        </div>
 42 |             <div class="btn_w" style="text-align: center">
 43 |                 <button @click="$refs.scroller4.stop()">stop</button>
 44 |                 <button @click="$refs.scroller4.start()">restart</button>
 45 |             </div>
 46 |     	</div>
 47 |     </div>
 48 | </template>
 49 | <script type="text/javascript">
 50 | import scroller from '../../src/components/vue-infinite-auto-scroll';
 51 | let num = 0;
 52 | export default {
 53 |     data() {
 54 |         return {
 55 |             listData1: [],
 56 |             listData2: [],
 57 |             listData3: [],
 58 |             listData4: []
 59 |         }
 60 |     },
 61 |     components: {
 62 |         scroller
 63 |     },
 64 |     created() {
 65 |         this.creatData1();
 66 |         this.creatData2();
 67 |         this.creatData3();
 68 |         this.creatData4();
 69 |         this.run();
 70 |     },
 71 |     methods: {
 72 |         creatData1() {
 73 |             let self = this;
 74 |             for (let i = 0; i < 6; i++) {
 75 |                 self.listData1.push({
 76 |                     txt: '这是第' + (i+1) + '行数据...'
 77 |                 });
 78 |             }
 79 |         },
 80 |         creatData2() {
 81 |             let self = this;
 82 |             for (let i = 0; i < 6; i++) {
 83 |                 self.listData2.push({
 84 |                     txt: '这是第' + (i+1) + '行数据...'
 85 |                 });
 86 |             }
 87 |         },
 88 |         creatData3() {
 89 |             let self = this;
 90 |             for (let i = 0; i < 20; i++) {
 91 |                 self.listData3.push({
 92 |                     txt: '这是第' + (i+1) + '行数据...'
 93 |                 });
 94 |             }
 95 |         },
 96 |         creatData4() {
 97 |             let self = this;
 98 |             for (let i = 0; i < 12; i++) {
 99 |                 self.listData4.push({
100 |                     txt: '这是第' + (++num) + '行数据...'
101 |                 });
102 |             }
103 |         },
104 |         run() {
105 |             let self = this;
106 |             _add();
107 |             function _add(){
108 |                 self.listData4.push({
109 |                     txt: '这是第' + (++num) + '行数据...'
110 |                 });
111 |                 if(num < 50){
112 |                     setTimeout(function() {
113 |                         _add();
114 |                     }, 1000);
115 |                 }
116 |             }
117 |         }
118 |     }
119 | }
120 | </script>
121 | <style lang="sass">
122 | body,
123 | html {
124 |     margin: 0;
125 |     padding: 0;
126 | }
127 | .wrap {
128 | 	width: 100%;
129 |     float: left;
130 | }
131 | 
132 | .item{
133 | 	width: 40%;
134 |     /*height: 340px;*/
135 |     margin: 5%;
136 |     padding: 20px 0;
137 |     border: 1px solid #ccc;
138 |     border-radius: 8px;
139 |     float: left;
140 |     box-sizing: border-box;
141 |     .option{
142 |     	line-height: 50px;
143 |     	text-align: center;
144 |     }
145 | }
146 | 
147 | .scroller-wrap {
148 | 	height: 250px;
149 | }
150 | 
151 | .scroller {
152 | 	display: flex;
153 | 	flex-direction: column;
154 | 	justify-content: center;
155 |     width: 150px;
156 |     min-height: 100%;
157 |     margin: 0 auto;
158 | }
159 | </style>


--------------------------------------------------------------------------------
/example-src/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | import router from './router'
4 | const app = new Vue({
5 |   el: '#app',
6 |   router,
7 |   render: h => h(App)
8 | })


--------------------------------------------------------------------------------
/example-src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Home from './components/index'
 4 | 
 5 | Vue.use(Router)
 6 | 
 7 | export default new Router({
 8 |   routes: [
 9 |     {
10 |       path: '/',
11 |       redirect: '/index'
12 |     },
13 |     {
14 |       path: '/index',
15 |       component: Home
16 |     }
17 |   ]
18 | })


--------------------------------------------------------------------------------
/example-src/template.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
 6 | 	<title>demo</title>
 7 | </head>
 8 | <body>
 9 | 	<div id="app"></div>
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
 6 | 	<title>demo</title>
 7 | </head>
 8 | <body>
 9 | 	<div id="app"></div>
10 | <script type="text/javascript" src="example.js"></script></body>
11 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-infinite-auto-scroll",
 3 |   "version": "1.2.1",
 4 |   "description": "基于vue.js的无缝自动滚动的插件，可添加无限数据而不卡顿",
 5 |   "main": "dist/vue-infinite-auto-scroll.min.js",
 6 |   "scripts": {
 7 |     "dev": "node build/dev-server.js",
 8 |     "build:prod": "webpack --config build/webpack.config.prod.js",
 9 |     "build:example": "webpack --config build/webpack.config.example.js",
10 |     "build:all": "npm run build:prod && npm run build:example"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git+https://github.com/wanls4583/vue-infinite-auto-scroll.git"
15 |   },
16 |   "keywords": [
17 |     "vue",
18 |     "vuejs",
19 |     "ui",
20 |     "components",
21 |     "infinite",
22 |     "auto-scroll",
23 |     "scroll"
24 |   ],
25 |   "author": "lisong",
26 |   "license": "ISC",
27 |   "bugs": {
28 |     "url": "https://github.com/wanls4583/vue-infinite-auto-scroll/issues"
29 |   },
30 |   "homepage": "https://github.com/wanls4583/vue-infinite-scroll#readme",
31 |   "devDependencies": {
32 |     "babel-core": "^6.0.0",
33 |     "babel-loader": "^7.1.2",
34 |     "babel-polyfill": "^6.26.0",
35 |     "babel-preset-env": "^1.6.1",
36 |     "css-loader": "^0.28.11",
37 |     "express": "^4.16.3",
38 |     "friendly-errors-webpack-plugin": "^1.7.0",
39 |     "html-webpack-plugin": "^3.2.0",
40 |     "node-sass": "^4.5.2",
41 |     "path": "^0.12.7",
42 |     "sass-loader": "^6.0.6",
43 |     "style-loader": "^0.21.0",
44 |     "url-loader": "^1.0.1",
45 |     "vue": "^2.5.13",
46 |     "vue-loader": "^11.3.3",
47 |     "vue-router": "^3.0.1",
48 |     "vue-template-compiler": "^2.5.13",
49 |     "webpack": "^3.10.0",
50 |     "webpack-dev-middleware": "^2.0.4",
51 |     "webpack-hot-middleware": "^2.21.0",
52 |     "webpack-merge": "^4.1.2"
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/src/components/vue-infinite-auto-scroll.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div :class="wrapClass" class="infinite-warp">
  3 | 		<ul :class="scrollerClass" class="scroller">
  4 | 			<li v-for="item in listData">
  5 | 				<slot :item="item"></slot>
  6 | 			</li>
  7 | 		</ul>
  8 | 	</div>
  9 | </template>
 10 | <script type="text/javascript">
 11 | export default {
 12 |     name: 'scroller',
 13 |     data() {
 14 |         return {
 15 |             listData: [],
 16 |             copyData: [],
 17 |             dataLength: 0,
 18 |             store: [],
 19 |             stroeLastIndex: -1
 20 |         }
 21 |     },
 22 |     props: {
 23 |         data: {
 24 |             type: Array,
 25 |             default: () => {
 26 |                 return []
 27 |             }
 28 |         },
 29 |         //force:默认为false（如果列表总高度小于容器将不进行循环滚动），当为true时，不论列表总高度为多少都将进行循环滚动
 30 |         //speed:滚动速度
 31 |         //once:是否只滚动一次
 32 |         //newFirst:新增加的数据是否优先显示，此参数会使轮播的顺序和加入的顺序不一致
 33 |         option: {
 34 |             type: Object,
 35 |             default: () => {
 36 |                 return {}
 37 |             }
 38 |         }
 39 |     },
 40 |     created() {
 41 |         //页面可能同时存在多个该组件
 42 |         window.scrollerCount = window.scrollerCount || 0;
 43 |         window.scrollerCount++;
 44 |         this.scrollerClass = 'scroller' + window.scrollerCount;
 45 |         this.wrapClass = 'infinite-warp' + window.scrollerCount;
 46 |         this.copyData = this.data.slice(0, this.data.length);
 47 |         this.dataLength = this.data.length;
 48 |         this.force = this.option.force || false;
 49 |         this.speed = this.option.speed || 1;
 50 |         this.once = this.option.once || false;
 51 |         this.newFirst = this.option.newFirst || false;
 52 |     },
 53 |     mounted() {
 54 |         this.scroll();
 55 |     },
 56 |     methods: {
 57 |         //开始滚动
 58 |         scroll() {
 59 |             let self = this;
 60 |             let wrap = document.querySelector('.' + self.wrapClass);
 61 |             let scroller = document.querySelector('.' + self.scrollerClass);
 62 |             this.scroller = scroller;
 63 |             if (!scroller)
 64 |                 return;
 65 |             let translateY = self.getComputedTranslateY(scroller);
 66 |             let li = scroller.querySelectorAll('li');
 67 |             if (scroller.scrollHeight > Math.abs(translateY) + wrap.clientHeight) {
 68 |                 scroller.style = 'transform: translate3d(0px, ' + (translateY - self.speed) + 'px, 0px);';
 69 |             } else { //只有列表总高度超过容器高度或者force参数为false时才循环无限滚动
 70 |                 let tmp = [];
 71 |                 let length = 0;
 72 |                 tmp = self.copyData.splice(0, 1);
 73 |                 length = tmp.length;
 74 |                 if (self.newFirst) {
 75 |                     //新数据添加到缓存对象的头部（将第一个被取出）
 76 |                     self.store = tmp.concat(self.store);
 77 |                 } else if (tmp.length) {
 78 |                     //新数据添加到缓存对象的尾部（等待缓存对象中前面的数据展示完才会被取出）
 79 |                     self.store.splice(0, 0, tmp[0]);
 80 |                 }
 81 |                 //一轮滚动还没结束（还有新数据未展示完）
 82 |                 if (length) {
 83 |                     //从缓存对象中取出第一个数据用于展示
 84 |                     tmp = self.store.splice(0, 1);
 85 |                     //取出后再添加到尾部，用于循环展示
 86 |                     self.store = self.store.concat(tmp);
 87 |                 }
 88 |                 //一轮滚动结束后且满足循环滚动条件则从缓存里取，以实现循环无限滚动
 89 |                 if (!length && !self.once &&
 90 |                     (self.force || (!self.force && li.length && self.data.length * li[0].clientHeight > wrap.clientHeight))) {
 91 |                     //从缓存对象中取出第一个
 92 |                     tmp = self.store.splice(0, 1);
 93 |                     //取出后再添加到尾部，用于循环展示
 94 |                     self.store = self.store.concat(tmp);
 95 |                 }
 96 |                 //将取出的数据展示到页面
 97 |                 tmp.forEach(function (item) {
 98 |                     self.$set(self.listData, self.listData.length, item);
 99 |                 });
100 |             }
101 |             //删除顶部无用的dom，防止浏览器卡顿
102 |             if (scroller && li.length) {
103 |                 let liHieght = li[0].clientHeight;
104 |                 let delLenght = (Math.abs(translateY) / liHieght) >> 0;
105 |                 if (delLenght > 5) {
106 |                     self.listData.splice(0, delLenght);
107 |                     scroller.style = 'transform: translate3d(0px, ' + (translateY % liHieght) + 'px, 0px);';
108 |                 }
109 |             }
110 |             window.cancelAnimationFrame(this.timer);
111 |             this.timer = window.requestAnimationFrame(function () {
112 |                 self.scroll();
113 |             })
114 |             this.stoped = false;
115 |         },
116 |         //获取计算后的translateY
117 |         getComputedTranslateY: function (dom) {
118 |             var startY = 0;
119 |             var style = window.getComputedStyle ? window.getComputedStyle(dom, null) : null || dom.currentStyle;
120 |             var matrix = style['transform'];
121 |             if (matrix && matrix != 'none') {
122 |                 startY = Number(matrix.replace(/matrix\(|\)/g, '').split(',')[5]);
123 |             }
124 |             return startY;
125 |         },
126 |         stop() {
127 |             window.cancelAnimationFrame(this.timer);
128 |             this.stoped = true;
129 |         },
130 |         start() {
131 |             var self = this;
132 |             this.stop();
133 |             this.timer = window.requestAnimationFrame(function () {
134 |                 self.scroll();
135 |             });
136 |         },
137 |         refresh(data) {
138 |             data = this.data || data;
139 |             this.copyData = data.concat([]);
140 |             this.store = [];
141 |             this.listData = [];
142 |             this.scroller.style = 'transform: translate3d(0px, 0px, 0px);';
143 |             if (this.copyData.length) {
144 |                 this.scroll();
145 |             }
146 |         }
147 |     },
148 |     watch: {
149 |         data: {
150 |             handler: function (val, oldVal) {
151 |                 if (val != oldVal) {
152 |                     this.refresh(val);
153 |                 } else if (val.length > this.dataLength) {
154 |                     this.copyData = this.copyData.concat(val.slice(this.dataLength, val.length));
155 |                 } else if (val.length == 0) {
156 |                     this.refresh([]);
157 |                 }
158 |                 this.dataLength = val.length;
159 |             },
160 |             deep: true
161 |         }
162 |     }
163 | }
164 | 
165 | </script>
166 | <style lang="scss">
167 | ul,
168 | li {
169 |     margin: 0;
170 |     padding: 0;
171 |     list-style: none;
172 | }
173 | .infinite-warp {
174 |     overflow: hidden;
175 | }
176 | </style>
177 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import vueMyCLass from './components/vue-infinite-auto-scroll.vue'
 2 | 
 3 | vueMyCLass.install = function (Vue, options = {}) {
 4 |   Vue.component(options.componentName || vueMyCLass.name, vueMyCLass)
 5 | }
 6 | 
 7 | // auto install
 8 | if (typeof window !== 'undefined' && window.Vue) {
 9 |   Vue.component(vueMyCLass.name, vueMyCLass)
10 | }
11 | 
12 | export default vueMyCLass
13 | 


--------------------------------------------------------------------------------