Vue 移動端向上滑動加載

        Vue搭配上 Element 還是挺香的，對於手機端顯示集合數據的時候，受到界面大小的限制，自然是不能用分頁來展示，一般主流選擇是點擊加載，或者向上滑動屏幕加載，說白了，這種機制與 下一頁的功能類似，區別在於將下一頁的數據追加到當前數據中，僅此而已，話不多說，這里先構造下前端的界面。如下所示，僅僅遍歷數據后面加了一個 滾動的div，然后通過 v-if 來判斷是否顯示哪一個. 

<div id="app">
    <div style="background-color:#4caf50;height:44px;" class="mid">
        <span style="color:white;width:100%">簽到統計</span>
        <span style="color:white;margin-right:10px" v-on:click="goBack"><i class="el-icon-close"></i></span>
    </div>
    <div  style="overflow:auto">
        <div>
            <template>
                <div v-for="item in items">
                    <el-row>
                        <div style="border-radius: 8px;background-color:#e4e4e4;text-align:center;margin:10px 5% 10px 5%;padding:8px">
                            <table style="width:100%">
                                <tr>
                                    <td width="25%">{{item.Name}}</td>
                                    <td width="25%" style="color:red">{{item|FilerGo}}</td>
                                    <td width="25%">{{item.ClassName}}</td>
                                    <td width="25%">{{item.Score}}</td>
                                </tr>
                            </table>
                        </div>
                    </el-row>
                </div>
            </template>
        </div>
        <div style="text-align:center">
            <el-link v-if="loading" type="success">向上滑動加載更多</el-link>
            <el-link v-else type="success">已經到底了~</el-link>
        </div>
    </div>
</div>

如上，這里是一個表格，將后端請求的數據 賦值給  items ，在請求數據之前，將當前頁碼記錄下來，每滾動一次，此頁碼+1，當做參數傳遞給后台，同時還有每頁顯示的條數也要作為參數來處理。拿到后台返回的數據之后，將總頁數與當前頁進行比較，判斷前面是否顯示繼續滾動或者已經到底。這里需要處理的給屏幕滾動的監聽事件綁定一個方法 window.addEventListener('scroll', this.FuncScroll); ，用來進一步判斷是否滑動時觸發請求數據的方法 

    <script type="text/javascript">
       //定義全局變量，來處理滾動請求
        var tbol = true;
        var vm = new Vue({
            el: '#app',
            data: {
                items: [],
                CurrTime: "",
                loading: false,
                pages: 1,
                currentPage: 0,
            },
            mounted: function () {
                //初始化，第一次加載數據
                this.InitFunc();
                //監聽當前屏幕滾動事件
                window.addEventListener('scroll', this.FuncScroll);  
            },
            methods: {
                goBack: function () {
                    window.history.go(-1);
                },
                InitFunc: function () {
                    let vm = this;
                    var currPage = vm.currentPage + 1;
                    //后端請求數據
                    $.post("/WeChat/Kiaser/GetDate", { pageNum: currPage, pageSize: 4 }, function (data) {
                        let pageInfo = data.Kiaser;
                        let search = data.Search;
                        pageInfo.forEach(function (item) {
                            vm.items.push(item);
                        });
                        //獲取當個頁碼
                        vm.currentPage = search.PageIndex;
                        //當前頁碼與總頁碼進行比對
                        vm.loading = vm.currentPage < search.TotalPage;
                        //根據手速來選擇間刷新速度
                        setTimeout(function () {tbol = true;},2200);
                    }, "JSON");
                },
                FuncScroll: function (e) {
                    //獲取屏幕滾動高度 var top = e.srcElement.scrollingElement.scrollTop;
                    //滿足滑動高度以及數據未加載完時，調用加載下一頁數據方法    
                    if (top > 120 && this.loading && tbol) {
                        tbol = false;
                        this.InitFunc();
                    }
                }
            },
           
        })
    </script>

按照思路，一路寫下來，調試的時候還是有幾點需要注意的，文中已標紅

第一： 滑動的時候請求多次，導致界面數據加載重復

第二： 滑動時候一次把所有頁碼數據加載完 

針對第一點，滑動的時候，后台請求是異步的，對於是否加載到底的值獲取是不及時，會導致一直刷，后台一直被請求

針對第二點，當加入臨時的一個bool 值來處理的時候，雖然不會導致冗余請求，但會感覺像一次性數據被全部加載完，體驗感不是很好，這里我的處理方式時，在拿到異步數據后，延遲對臨時bool 值進行賦值，這樣對於手機來講，沒滾動一次，加載一次的效果更明顯

說了這么多，展示一下界面完畢時效果

    

如果不需要向上滑動加載，而是點擊元素 “加載更多” 時去觸發加載下一頁，只需要給加載更多的綁定請求后台數據的click 方法即可。沒必要去監聽屏幕滾動事件，以及臨時變量