vue10行程式碼實現上拉翻頁載入更多資料，純手寫js實現下拉重新整理上拉翻頁不引用任何第三方外掛/庫

一提到移動端的下拉重新整理上拉翻頁，你可能就會想到iScroll外掛，沒錯iScroll是一個高效能，資源佔用少，無依賴，多平臺的javascript滾動外掛。iScroll不僅僅是 滾動。它可以處理任何需要與使用者進行移動互動的元素。在你的專案中包含僅僅4kb大小的iScroll，你的專案便擁有了滾動，縮放，平移，無限滾動，視差滾動，旋轉功能。iScroll的強大毋庸置疑，本人也非常歡迎大家使用iScroll。還有dropload也是挺好用的。
本文講到的上拉翻頁載入更多方法的核心思路其實很簡單，思路一看就懂，大道至簡嘛，雖然程式碼很少，不過實現過程中的檢視與資料的互動邏輯還有有些複雜，不細心的話，很容易蒙圈，往往特別簡單的東西，背後都有很細緻入微的邏輯關係。
本文的方法，初步是在vue-cli的環境下實現，程式碼包含了template和script，方法有用到document，window物件，初版有些粗糙。

本文實現上拉翻頁載入更多的核心思路就是：如果“正在載入”這個層被上拉超出頁面底部，就觸發載入下一頁的方法，對就是這麼簡單！

本文方法最繁瑣的地方主要在於互動方面：幾個“正在載入”的層根據資料渲染的時機和上拉操作時候的顯隱控制。方法裡面大多數語句後面都有註釋講解，細心點應該能理順邏輯。本文只寫了上拉翻頁的功能展示，下來重新整理更簡單也同樣的道理(每次觸發都只加載第一頁就可以了)，本文的方法思路同樣可以運用於jquery、react、angular……等其他框架，因為簡單，所以便捷。理解思路最重要，理解以後完全可以自己手寫。
有時候看似複雜的問題，往往可以劍走偏鋒，曲線救國！

好了下面直接上程式碼！

1、template部分：

1
2
3
4
5
6
7
8
9
10
11
12
<template>
    <div v-if="!!dataList.length">
        <div v-for="(item,index) in dataList">
            <!-- 資料展示列表 -->
        </div>
        <div id="loadMore" v-show="loadMore">正在載入</div><!-- 第一次載入資料 -->
        <div id="loadMoreing" v-show="loadMoreing">正在載入</div><!-- 上拉載入資料 -->
        <div id="noMoreData" v-show="loadMore?false:!loadMoreing">已顯示全部任務</div><!-- 所有資料載入完成 -->
    </div>
    <div id="loadMoreing" v-else-if="loadMoreing">正在載入</div><!-- 頁面渲染時 -->
    <div class="noData" v-else>沒有資料</div>
</template>

2、script部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
export default {
    data () {
        return {
            dataList:new Array,
            dataCurPage:1,// 資料頁碼
            loadMore:true,// 第一次載入資料時的正在載入
            loadMoreing:true,// 上拉載入資料時的正在載入
        }
    },
    mounted:function(){
        let onScroll = window.addEventListener('scroll', this.scrollRun);// 監聽滾動
    },
    methods:{
        getdataList:function(){
            this.loadMoreing = true;
            let _self = this;
            $.ajax({
                type:"post",
                async: false,
                timeout : 10000,
                dataType:"json",
                url:"",
                data:{curPage:_self.dataCurPage},
                success:function(data){
                    _self.loadMoreing = false;// 接收到資料時，隱藏正在載入
                    if(!!data.dataList.length){// 如果有資料
                        if(_self.dataCurPage==1){// 當載入第1頁資料時
                            _self.dataList = new Array;// 第1頁清空資料
                            if(data.dataList.length>0){// 如果第1頁資料條數大於0
                                data.dataList.forEach(function(ele,i){
                                    _self.dataList.push(ele);// 填充頁面資料
                                })
                                _self.loadMore = true;// 顯示正在載入(在螢幕底部以外)
                            }else{
                                _self.loadMore = false;// 沒有資料則隱藏正在載入
                            }
                        }else{// 當載入第2頁及其以後的資料時
                            if(data.dataList.length>0){
                                data.dataList.forEach(function(ele,i){
                                    _self.dataList.push(ele);// 填充頁面資料
                                })
                                _self.loadMore = true;// 顯示正在載入(在螢幕底部以外)
                            }else{
                                _self.loadMore = false;// 沒有資料則隱藏正在載入
                            }
                        }
                        //如果總頁數==當前頁=>沒有更多資料了
                        if(data.totalPage==_self.dataCurPage){
                            _self.loadMore = false;
                            _self.loadMoreing = false;
                        }
                    }       
                },
                error:function(xhr,status,error){
                    console.log("錯誤",xhr,status,error);
                    if(status == "timeout"){_self.loadMoreing = false;weui.toast('請求超時', 800);}
                },
                complete:function(){_self.loadMoreing = false;}
            })
        },
        scrollRun:function(){// 核心程式碼
            if(this.loadMore == true&&!!document.getElementById("loadMore")){//如果總共有一頁以上資料，才執行
                let bodyWidth = document.body.offsetWidth;
                let bodyHeight = window.innerHeight*(375/bodyWidth);// 以6s螢幕為基準比例
                let loadMoreTop = document.getElementById("loadMore").getBoundingClientRect().top*(375/bodyWidth);//loadMore距離頂部的距離
     
                if(bodyHeight-loadMoreTop>20){//loadMore被拉出底部20px時
                    // console.log("bodyHeight",bodyHeight,"loadMoreTop",loadMoreTop,"差值",bodyHeight-loadMoreTop,"頁碼",this.dataCurPage+1);
                    this.loadMore = false;//停止執行scrollRun，否則會觸發載入所有頁面
                    this.getMoreList(_self.dataCurPage++);
                }
            }
        },
    }
}