java>> Scrollload>> 返回
项目作者： fa-ge

项目描述 ：
scroll bottom load more data pull refresh 滚动到底部加载更多数据 下拉刷新
高级语言： JavaScript
项目地址: git://github.com/fa-ge/Scrollload.git
创建时间： 2017-01-07T18:04:36Z
项目社区：https://github.com/fa-ge/Scrollload
开源协议：
下载


原文地址 https://github.com/fa-ge/Scrollload/blob/master/README.md

初衷

如今移动端站点越来越多，滚动到底部加载数据和下拉刷新的需求非常的常见，即使现在很多pc站点也会有这样的需求，比如百度首页就有。虽然简单的完成这么一个功能非常方便，但是滚动往往会成为性能的瓶颈，处理不好滚动很有可能会不流畅。既然很多页面和项目都需要，当然最需要有一个复用性高的插件。但是我却一直没找到特别好用的插件，有些需要依赖jquery，但貌似编写这样的插件时jquery并没有带来任何的便利。

Scrollload.js介绍

Scrollload是一个无依赖，体积极小（压缩+gzip后不到3k），可配置性高(可以自定义加载时候动画，加载完后的dom，提前加载的距离)，可扩展性强大（很方便做到指定容器内的滚动，多tab的滚动,异常处理，刷新重新加载等），性能好（在滚动的时候做了一些性能优化，如缓存window的高度，函数节流）的js插件。源码地址: https://github.com/fa-ge/Scrollload

解决的痛点

  1. 无依赖，配置简单，有多套滚动加载效果可选(需要单独引入对应的css,当然也有默认效果)
  2. 支持下拉刷新
  3. 在ios中，全局滚动会有很多不好的体验，我认为是可以用局部滚动来替代全局的。局部滚动也会有几个坑，但都是可解决的，也就是说全局滚动的坑目前还很难解决。该插件内置局部滚动坑的解决方案，方便使用局部滚动替代全局滚动且无副作用。具体见ios局部滚动的坑及解决方案。

兼容性

不支持ie8及以下浏览器。

示例

无任何效果

有loading动画一(百度移动端包括下拉刷新)

有loading动画二(传统)

多个tab效果

div容器中的滚动加载

左右滑动tab并且滚动加载——复杂示例

异常处理

点击刷新重新加载

示例源码

安装

  1. npm install scrollload --save

使用

如果你没有用模块管理， 直接从window对象下取Scrollload对象也是可以的，打包后的js放在lib目录下，可以直接用script标签引入
同时支持模块引入 

  1. //ES6
  2. import Scrollload from 'Scrollload'
  3. //commonjs
  4. const Scrollload = require('Scrollload').default

当然也支持amd,不过我没用过。
真正用起来也非常简单。记住一点。插件会把底部DOM插入到container最后一个子节点之后。

你的dom结构是以下这样的

  1. <div class="scrollload-container">
  2.     <ul class="scrollload-content">
  3.         <li></li>
  4.     </ul>
  5. </div>

插件会把底部DOM就会被插在ul标签的后面。你可以按照你以前的方式操作dom。demo中我都是用这种方式来做的。 我

下面是js中的使用。 

  1. let page = 1
  2. new Scrollload({
  3.       // container 和 content 两个配置的默认取的scrollload-container和scrollload-content类的dom。只要你按照以上的dom结构写，这两个配置是可以省略的
  4.       container: document.querySelector('.scrollload-container'),
  5.     content: document.querySelector('.scrollload-content'),
  6.     loadMore: function(sl) {
  8.         if (page === 6) {
  9.           // 没有数据的时候需要调用noMoreData
  10.             sl.noMoreData()
  11.             return
  12.         }
  14.         // 我这里用jquery的不是因为需要jquery，只是jquery的语法看起来比较简单。大家都认识。
  15.         // 如果你不是用jquery，可以看看原生的insertAdjacentHTML方法来替代append
  16.         $.ajax({
  17.             type: 'GET',
  18.             url: `http://rap.taobao.org/mockjsdata/14522/getgamelist?page=${page++}`,
  19.             dataType: 'json',
  20.             success: function(data){
  21.                 // contentDom其实就是你的scrollload-content类的dom
  22.                 $(sl.contentDom).append(data)
  24.                 // 处理完业务逻辑后必须要调用unlock
  25.                 sl.unLock()
  26.             },
  27.             error: function(xhr, type){
  28.                 // 加载出错，需要执行该方法。这样底部DOM会出现出现异常的样式。
  29.                 sl.throwException()
  30.             }
  31.         })
  32.     },
  33.     // 你也可以关闭下拉刷新
  34.     enablePullRefresh: true,
  35.     pullRefresh: function (sl) {
  36.         $.ajax({
  37.             type: 'GET',
  38.             url: `http://rap.taobao.org/mockjsdata/14522/getgamelist?page=1`,
  39.             dataType: 'json',
  40.             success: function(data){
  41.                 $(sl.contentDom).prepend(data)
  43.                 // 处理完业务逻辑后必须要调用refreshComplete
  44.                 sl.refreshComplete()
  45.             }
  46.         })
  47.     }
  48. })

参数列表

  1. // 以下是配置参数及其默认内容     
  3. // 容器
  4. container: document.querySelector('.scrollload-container'),
  5. // 列表内容
  6. content: container.querySelector('.scrollload-content'),
  7. // 视窗(默认是window，如果是局部滚动需要设置滚动的dom)
  8. window: window,
  10. // 是否开启加载更多(默认开启，如果关闭则滚动到底部则不再出现加载更多)
  11. enableLoadMore: true,
  12. // 初始化的时候是否锁定，锁定的话则不会去加载更多。由于这个插件实例化后默认是没有锁定的所以会去调用loadMore，但其实在多个tab的情况下是不应该一实例化完后就去调用的。所以有了这个参数。
  13. isInitLock: false,
  14. // 阀值 (滚动到底部提前加载的距离)
  15. threshold: 10,
  17. // 修复局部滚动的坑。参见ios局部滚动的坑及解决方案 https://zhuanlan.zhihu.com/p/24837233
  18. useLocalScrollFix: false,
  20. // 底部加载中的html
  21. loadingHtml: generateHtml('加载中...'),
  22. // 底部没有更多数据的html
  23. noMoreDataHtml: generateHtml('没有更多数据了'),
  24. // 底部出现异常的html
  25. exceptionHtml: generateHtml('出现异常'),
  26. // 加载更多的回调
  27. loadMore: noop,
  29. // 是否开启下拉刷新
  30. enablePullRefresh: false,
  31. // 顶部下拉刷新的html
  32. notEnoughRefreshPortHtml: generateHtml('下拉刷新'),
  33. // 顶部松开刷新的html
  34. overRefreshPortHtml: generateHtml('松开刷新'),
  35. // 顶部正在刷新的html
  36. refreshingHtml: generateHtml('正在刷新'),
  37. // 下拉刷新的回调
  38. pullRefresh: noop,
  39. // 到达刷新点的回调(包括向上和向下，可以通过isMovingDown判断方向)
  40. arrivedRefreshPortHandler: noop,
  41. // 开始滑动的回调
  42. touchStart: noop,
  43. // 滑动时的回调
  44. touchMove: noop,
  45. // 滑动中松开手指的回调
  46. touchEnd: noop,
  47. // 超过可刷新位置后的监听函数
  48. overRefreshPortHandler: noop,
  49. // 未超过可刷新位置前的监听函数
  50. notEnoughRefreshPortHandler: noop,
  52. // 计算下拉的阻力函数
  53. calMovingDistance(start, end) {
  54.     return (end - start) / 3
  55. },
  56. // 实例化完后的回调
  57. initedHandler: noop

API

方法
  • lock(): 锁定后不会调用loadMore方法
  • unLock(): 每次滚动到底部都会锁定，所以你在loadMoreFn方法中需要解锁，下次滚动到底部才能继续调用loadMoreFn
  • noMoreData(): 当你的数据全部加载完后调用这个方法，将显示没有更多数据的div，你也可以配置这个div，用noMoreDataHtml配置参数
  • refreshData(): 当你调用完noData方法后，如果你想刷新当前的数据重新加载就要调用这个方法
  • throwException(): 出现异常需要调用这个方法，会在底部DOM中出现相应的样式
  • solveException(): 当你的异常问题解决后需要调用这个方法可以继续加载数据
  • refreshComplete(): 下拉刷新的时候你去请求完数据后需要调用这个函数通知我。我就可以把正在刷新的状态改成刷新完成。
  • triggerPullResfresh(): 主动触发下拉刷新。
  • getOptions(): 获取配置
  • setOptions(obj): 修改配置。obj和new Scrollload()的第二个参数一样的格式。
  • setGlobalOptions(obj): 全局配置，一次配置多次时候。调用这个方法和之前的方法不一样。之前的都需要对象实例化后才能调用。这个方法直接Scrollload构造函数上调用。Scrollload.setGlobalOptions()。接受的参数和setOptions方法一样
属性
  • bottomDom: 底部DOM，包裹着加载中动画和没有更多数据的dom对象
  • isLock: 是否为锁定状态
  • hasMoreData: 是否还有更多数据，默认为true，调用noData方法后为false
  • container: 你传进来的container
  • content: 你传进来的content
  • win: 你传进来的window
  • isMovingDown: 下拉刷新的时候你滑动的方向
  • isRefreshing: 下拉刷新的时候你是否在刷新中
  • distance: 下拉刷新的时候你滑动的dom移动的距离，不是你手指移动的距离。这两者的关系可以通过calMovingDistance计算

交流

如果你有好的加载更多动画的效果，可以在loading-demos文件夹下写一些自己的demo,然后提一个pr给我。

当然用的时候有什么建议都可以和我提，有什么不懂得也可以和我提。任何形式和我提都可以。