Vue 移动端向上滑动加载

Vue搭配上 Element 还是挺香的，对于手机端显示集合数据的时候，受到界面大小的限制，自然是不能用分页来展示，一般主流选择是点击加载，或者向上滑动屏幕加载，说白了，这种机制与下一页的功能类似，区别在于将下一页的数据追加到当前数据中，仅此而已，话不多说，这里先构造下前端的界面。如下所示，仅仅遍历数据后面加了一个滚动的div，然后通过 v-if 来判断是否显示哪一个.

<div id="app">
    <div style="background-color:#4caf50;height:44px;" class="mid">
        <span style="color:white;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="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 方法即可。没必要去监听屏幕滚动事件，以及临时变量