无限滚动加载插件
Infinite-Scroll
介绍
可用方法
该模块可以使容器进行滚动到底部时加载更多数据。
当容器滚动到底部时会动态的触发loadMore方法。
npm安装$ npm install infinite-scroll RequireJS
require.config({ paths: { infiniteScroll: './infiniteScroll/index.js' } }); require( [ 'infiniteScroll' ], function( infiniteScroll ) { ... }); 直接引用
<script src="./infiniteScroll.js"></script> <script> var scroll = new infiniteScroll('list', { loadMore: function () { do some thing setTimeout(() => { this.loading = false }, 500); } }) </script> 使用方式
new infiniteScroll(id, obj) infiniteScroll构造函数接受2个参数 第一个参数为字符串, 指定容器的ID, 第二个是参数为配置对象。 对象参数值：
| 名称 | 功能 | 默认值 | 可选值 |
| distance | 滚动距离容器底部阈值 触发loadMore | 100 | Number |
| noMore | 是否禁止加载更多 | false | Boolen |
| initLoad | 默认会立即检查是否需要执行加载方法。在初始状态下内容撑不满容器时十分有用。 | true | Boolen |
| loadMore | 在容器滚动到底部时触发。ajax加载完成后执行this.loading = false。 如果已经是最后一条数据了this.noMore = true来禁止重复加载。 | 必须 | Function |
restart() 开启滚动加载
stop() 禁止滚动加载
预览地址 https://unjust-life.github.io/InfiniteScroll/src/index 版本更新记录-v1.0.0 发布npm包 兼容webpack打包 CommonJS和AMD规范
-v0.2修改优化部分逻辑 精简代码
-v0.1初始版
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
