摘要：原文地址初衷如今移動端站點越來越多，滾動到底部加載數據和下拉刷新的需求非常的常見，即使現在很多站點也會有這樣的需求，比如百度首頁就有。

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

如今移動端站點越來越多，滾動到底部加載數據和下拉刷新的需求非常的常見，即使現在很多pc站點也會有這樣的需求，比如百度首頁就有。雖然簡單的完成這么一個功能非常方便，但是滾動往往會成為性能的瓶頸，處理不好滾動很有可能會不流暢。既然很多頁面和項目都需要，當然最需要有一個復用性高的插件。但是我卻一直沒找到特別好用的插件，有些需要依賴jquery，但貌似編寫這樣的插件時jquery并沒有帶來任何的便利。

Scrollload是一個無依賴，體積極小（壓縮+gzip后不到3k），可配置性高(可以自定義加載時候動畫，加載完后的dom，提前加載的距離)，可擴展性強大（很方便做到指定容器內的滾動，多tab的滾動,異常處理，刷新重新加載等），性能好（在滾動的時候做了一些性能優化，如緩存window的高度，函數節流）的js插件。源碼地址: https://github.com/fa-ge/Scro...

無依賴，配置簡單，有多套滾動加載效果可選(需要多帶帶引入對應的css,當然也有默認效果)

支持下拉刷新

在ios中，全局滾動會有很多不好的體驗，我認為是可以用局部滾動來替代全局的。局部滾動也會有幾個坑，但都是可解決的，也就是說全局滾動的坑目前還很難解決。該插件內置局部滾動坑的解決方案，方便使用局部滾動替代全局滾動且無副作用。具體見ios局部滾動的坑及解決方案。

不支持ie8及以下瀏覽器。

無任何效果

有loading動畫一(百度移動端包括下拉刷新)

有loading動畫二

多個tab效果

div容器中的滾動加載

左右滑動tab并且滾動加載——復雜示例

異常處理

點擊刷新重新加載

示例源碼

npm install scrollload --save

如果你沒有用模塊管理， 直接從window對象下取Scrollload對象也是可以的，打包后的js放在lib目錄下，可以直接用script標簽引入
同時支持模塊引入

//ES6
import Scrollload from "Scrollload"
//commonjs
const Scrollload = require("Scrollload").default

當然也支持amd,不過我沒用過。
真正用起來也非常簡單。記住一點。插件會把底部DOM插入到container最后一個子節點之后。

你的dom結構是以下這樣的

插件會把底部DOM就會被插在ul標簽的后面。你可以按照你以前的方式操作dom。demo中我都是用這種方式來做的。 我

下面是js中的使用。

let page = 1
new Scrollload({
      // container 和 content 兩個配置的默認取的scrollload-container和scrollload-content類的dom。只要你按照以上的dom結構寫，這兩個配置是可以省略的
      container: document.querySelector(".scrollload-container"),
    content: document.querySelector(".scrollload-content"),
    loadMore: function(sl) {
        
        if (page === 6) {
          // 沒有數據的時候需要調用noMoreData
            sl.noMoreData()
            return
        }

        // 我這里用jquery的不是因為需要jquery，只是jquery的語法看起來比較簡單。大家都認識。
        // 如果你不是用jquery，可以看看原生的insertAdjacentHTML方法來替代append
        $.ajax({
            type: "GET",
            url: `http://rap.taobao.org/mockjsdata/14522/getgamelist?page=${page++}`,
            dataType: "json",
            success: function(data){
                // contentDom其實就是你的scrollload-content類的dom
                $(sl.contentDom).append(data)

                // 處理完業務邏輯后必須要調用unlock
                sl.unLock()
            },
            error: function(xhr, type){
                // 加載出錯，需要執行該方法。這樣底部DOM會出現出現異常的樣式。
                sl.throwException()
            }
        })
    },
    // 你也可以關閉下拉刷新
    enablePullRefresh: true,
    pullRefresh: function (sl) {
        $.ajax({
            type: "GET",
            url: `http://rap.taobao.org/mockjsdata/14522/getgamelist?page=1`,
            dataType: "json",
            success: function(data){
                $(sl.contentDom).prepend(data)

                // 處理完業務邏輯后必須要調用refreshComplete
                sl.refreshComplete()
            }
        })
    }
})

// 以下是配置參數及其默認內容     

// 容器
container: document.querySelector(".scrollload-container"),
// 列表內容
content: container.querySelector(".scrollload-content"),
// 視窗(默認是window，如果是局部滾動需要設置滾動的dom)
window: window,
  
// 是否開啟加載更多(默認開啟，如果關閉則滾動到底部則不再出現加載更多)
enableLoadMore: true,
// 初始化的時候是否鎖定，鎖定的話則不會去加載更多。由于這個插件實例化后默認是沒有鎖定的所以會去調用loadMore，但其實在多個tab的情況下是不應該一實例化完后就去調用的。所以有了這個參數。
isInitLock: false,
// 閥值 (滾動到底部提前加載的距離)
threshold: 10,

// 修復局部滾動的兩個坑。參見ios局部滾動的坑及解決方案 https://zhuanlan.zhihu.com/p/24837233
useLocalScrollFix: false,
useScrollFix: false,

// 底部加載中的html
loadingHtml: generateHtml("加載中..."),
// 底部沒有更多數據的html
noMoreDataHtml: generateHtml("沒有更多數據了"),
// 底部出現異常的html
exceptionHtml: generateHtml("出現異常"),
// 加載更多的回調
loadMore: noop,

// 是否開啟下拉刷新
enablePullRefresh: false,
// 頂部下拉刷新的html
notEnoughRefreshPortHtml: generateHtml("下拉刷新"),
// 頂部松開刷新的html
overRefreshPortHtml: generateHtml("松開刷新"),
// 頂部正在刷新的html
refreshingHtml: generateHtml("正在刷新"),
// 下拉刷新的回調
pullRefresh: noop,
// 到達刷新點的回調(包括向上和向下，可以通過isMovingDown判斷方向)
arrivedRefreshPortHandler: noop,
// 開始滑動的回調
touchStart: noop,
// 滑動時的回調
touchMove: noop,
// 滑動中松開手指的回調
touchEnd: noop,
// 超過可刷新位置后的監聽函數
overRefreshPortHandler: noop,
// 未超過可刷新位置前的監聽函數
notEnoughRefreshPortHandler: noop,

// 計算下拉的阻力函數
calMovingDistance(start, end) {
    return (end - start) / 3
},
// 實例化完后的回調
initedHandler: noop

方法

lock(): 鎖定后不會調用loadMore方法

unLock(): 每次滾動到底部都會鎖定，所以你在loadMoreFn方法中需要解鎖，下次滾動到底部才能繼續調用loadMoreFn

noMoreData(): 當你的數據全部加載完后調用這個方法，將顯示沒有更多數據的div，你也可以配置這個div，用noMoreDataHtml配置參數

refreshData(): 當你調用完noData方法后，如果你想刷新當前的數據重新加載就要調用這個方法

throwException(): 出現異常需要調用這個方法，會在底部DOM中出現相應的樣式

solveException(): 當你的異常問題解決后需要調用這個方法可以繼續加載數據

refreshComplete(): 下拉刷新的時候你去請求完數據后需要調用這個函數通知我。我就可以把正在刷新的狀態改成刷新完成。

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，loading的css必須是loading.css，并在頭部加入loadingHtml的dom結構。參考,然后提一個pr給我。

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