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

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

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

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

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

支持下拉刷新

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

不支持ie8及以下瀏覽器。

無任何效果

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

有l(wèi)oading動(dòng)畫二

多個(gè)tab效果

div容器中的滾動(dòng)加載

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

異常處理

點(diǎn)擊刷新重新加載

示例源碼

npm install scrollload --save

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

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

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

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

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

下面是js中的使用。

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

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

                // 處理完業(yè)務(wù)邏輯后必須要調(diào)用unlock
                sl.unLock()
            },
            error: function(xhr, type){
                // 加載出錯(cuò)，需要執(zhí)行該方法。這樣底部DOM會(huì)出現(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，如果是局部滾動(dòng)需要設(shè)置滾動(dòng)的dom)
window: window,
  
// 是否開啟加載更多(默認(rèn)開啟，如果關(guān)閉則滾動(dòng)到底部則不再出現(xiàn)加載更多)
enableLoadMore: true,
// 初始化的時(shí)候是否鎖定，鎖定的話則不會(huì)去加載更多。由于這個(gè)插件實(shí)例化后默認(rèn)是沒有鎖定的所以會(huì)去調(diào)用loadMore，但其實(shí)在多個(gè)tab的情況下是不應(yīng)該一實(shí)例化完后就去調(diào)用的。所以有了這個(gè)參數(shù)。
isInitLock: false,
// 閥值 (滾動(dòng)到底部提前加載的距離)
threshold: 10,

// 修復(fù)局部滾動(dòng)的兩個(gè)坑。參見ios局部滾動(dòng)的坑及解決方案 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ǎn)的回調(diào)(包括向上和向下，可以通過isMovingDown判斷方向)
arrivedRefreshPortHandler: noop,
// 開始滑動(dòng)的回調(diào)
touchStart: noop,
// 滑動(dòng)時(shí)的回調(diào)
touchMove: noop,
// 滑動(dòng)中松開手指的回調(diào)
touchEnd: noop,
// 超過可刷新位置后的監(jiān)聽函數(shù)
overRefreshPortHandler: noop,
// 未超過可刷新位置前的監(jiān)聽函數(shù)
notEnoughRefreshPortHandler: noop,

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

方法

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

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

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

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

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

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

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

getOptions(): 獲取配置

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

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

屬性

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

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

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

container: 你傳進(jìn)來的container

content: 你傳進(jìn)來的content

win: 你傳進(jìn)來的window

isMovingDown: 下拉刷新的時(shí)候你滑動(dòng)的方向

isRefreshing: 下拉刷新的時(shí)候你是否在刷新中

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

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

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