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 方法即可。没必要去监听屏幕滚动事件，以及临时变量