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

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

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

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

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

支持下拉刷新

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

不支持ie8及以下瀏覽器。

無任何效果

有l(wèi)oading動畫一(百度移動端包括下拉刷新)

有l(wèi)oading動畫二

多個tab效果

div容器中的滾動加載

左右滑動tab并且滾動加載——復(fù)雜示例

異常處理

點擊刷新重新加載

示例源碼

npm install scrollload --save

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

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

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

你的dom結(jié)構(gòu)是以下這樣的

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

下面是js中的使用。

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

        // 我這里用jquery的不是因為需要jquery，只是jquery的語法看起來比較簡單。大家都認(rèn)識。
        // 如果你不是用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)

                // 處理完業(yè)務(wù)邏輯后必須要調(diào)用unlock
                sl.unLock()
            },
            error: function(xhr, type){
                // 加載出錯，需要執(zhí)行該方法。這樣底部DOM會出現(xiàn)出現(xiàn)異常的樣式。
                sl.throwException()
            }
        })
    },
    // 你也可以關(guān)閉下拉刷新
    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)

                // 處理完業(yè)務(wù)邏輯后必須要調(diào)用refreshComplete
                sl.refreshComplete()
            }
        })
    }
})

// 以下是配置參數(shù)及其默認(rèn)內(nèi)容     

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

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

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

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

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

方法

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

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

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

refreshData(): 當(dāng)你調(diào)用完noData方法后，如果你想刷新當(dāng)前的數(shù)據(jù)重新加載就要調(diào)用這個方法

throwException(): 出現(xiàn)異常需要調(diào)用這個方法，會在底部DOM中出現(xiàn)相應(yīng)的樣式

solveException(): 當(dāng)你的異常問題解決后需要調(diào)用這個方法可以繼續(xù)加載數(shù)據(jù)

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

getOptions(): 獲取配置

setOptions(obj): 修改配置。obj和new Scrollload()的第二個參數(shù)一樣的格式。

setGlobalOptions(obj): 全局配置，一次配置多次時候。調(diào)用這個方法和之前的方法不一樣。之前的都需要對象實例化后才能調(diào)用。這個方法直接Scrollload構(gòu)造函數(shù)上調(diào)用。Scrollload.setGlobalOptions()。接受的參數(shù)和setOptions方法一樣

屬性

bottomDom: 底部DOM，包裹著加載中動畫和沒有更多數(shù)據(jù)的dom對象

isLock: 是否為鎖定狀態(tài)

hasMoreData: 是否還有更多數(shù)據(jù)，默認(rèn)為true，調(diào)用noData方法后為false

container: 你傳進來的container

content: 你傳進來的content

win: 你傳進來的window

isMovingDown: 下拉刷新的時候你滑動的方向

isRefreshing: 下拉刷新的時候你是否在刷新中

distance: 下拉刷新的時候你滑動的dom移動的距離，不是你手指移動的距離。這兩者的關(guān)系可以通過calMovingDistance計算

如果你有好的加載更多動畫的效果，可以在loading-demos文件夾下寫一些自己的demo，loading的css必須是loading.css，并在頭部加入loadingHtml的dom結(jié)構(gòu)。參考,然后提一個pr給我。

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