以asp.net 为后端，结合Vue.js和axios、vue-infinite-scroll实现滚动加载

滚动加载或者说是无限加载，是一种当今非常流行的列表显示方式。当一个列表内容太长，通常需要使用分页的形式去展现出来，可是老是需要用户去点击下一页又显得很不人道，于是滚动加载的技术就出来了，只要内容滚动到底部，就自动加载出下一页的内容出来，用户体验刚刚的。

在这个例子当中，我用了asp.net mvc，首先对数据进行分页输出JSON，再利用Vue.js配合axios，通过AJAX的方法获取数据，最后使用vue-infinite-scroll实现滚动加载。

得到分页数据，在控制器当中，新建一个Getlist,pageIndex代表当前是第几页，pageSize是一页显示多少笔数据，最后totalCount返回一个这个列表的总数据。

public List Getlist(int pageIndex, int pageSize, ref int totalCount)
        {
            var list=(from p in listall orderby p.ID descending select p).Skip((pageIndex - 1) * pageSize).Take(pageSize);
            totalCount = listall.Count();
            
            return list.ToList();
        }

接着，我们还需要生成一个已经分页完成的JSON，并且记录好总页数，一并输出：

 [HttpPost]
        public ActionResult ShowthePro(int? page)
        {
            int pageSize = 8;
            int pageIndex = page ?? 1;
            int totalCount = 0;
            
            var listpage = Getlist(pageIndex, pageSize, ref totalCount);
            int totalpage = (totalCount / pageSize) + 1;
            return Json(new {
                count=totalpage,
                data=listpage
            }, JsonRequestBehavior.AllowGet);
        }

这个时候，我们先使用Vue.js和axios测试一下不自动分页，看看有没有什么问题。先写js:

   Vue.prototype.$http = axios;
    new Vue({
        el: '#Pro',
        data: {
            peps: ''
        },
        mounted() {
            this.$http.post('/Json/ShowthePro?page=1').then(response=>this.peps = response.data.data);
        }
    })

然后将视图的模板做好：

 

        

            
              
{{pep.name}}
        

    

运行成功，接着我们就要用到vue-infinite-scroll来实现滚动加载。

vue-infinite-scroll Github 主页，可以去这里下载，然后本地加载，当然也可以使用CDN: https://unpkg.com/vue-infinite-scroll。

选项

选项	说明
infinite-scroll-disabled	如果此属性的值为true，则无限滚动将被禁用。
infinite-scroll-distance	Number(default = 0)当元素底部与窗口底部的距离达到这个数值时，执行v-infinite-scroll
infinite-scroll-immediate-check	Boolean（default = true）指示在绑定后应立即检查该伪指令。 如果内容不够高以填满可滚动容器，则很有用。
infinite-scroll-listen-for-event	当Vue实例中发生事件时，无限滚动将再次检查。

了解了基本应用后，我们首先加载vue-infinite-scroll到我们页面

接着修改视图代码，对#Pro增加选项：

 

   .......
   

最后修改js代码，这是很关键的一步，我们已经完成后端分页并且以JSON输出，那么在这里我们只需要让其滚动就自动加载分页好的JSON，当页数到达总数时，我们就停止滚动加载。

从网上扒下一个实例，我们就照这个实例进行修改好了：

我第一次写的时候发生了一点意外，就是没有使用concat连接起来，导致页面一页一页的翻过去但没有累加起来：

可是一旦concat连接起来，JSON数据就会出现连接不上的情况，我在Chorme安装了Vue Dvetool插件后，看到连接的JSON数据发生错误，我觉得是初始化的JSON和第一页的JSON数据concat起来发生错误，那么只要让代码确认初始化的JSON不参与concat就可以了，代码相当简单：

 vm.$http.get('/Json/ShowthePro?page=' + pages).then(
                    function (response) {
                        var list1 = response.data.pros;
if (vm.pros.length == 0) {
                            this.pros = list1;
                        }
                        else {
                          var list2 = vm.pros;
                            vm.pros = list2.concat(list1);}  
                      pages++;
                        setTimeout(() => {
                            vm.busy = false;
                        }, 1000);
                    });

测试通过。

为了防止当前页面超过所有页面还要继续读取数据，我这里使用了一个布尔变量，当超过页面总数时，整个无限加载就停止运行。

完整代码如下：

 Vue.prototype.$http = axios;
    var pages = 1;
    var totrue = true;
    new Vue({
        el: '#Pro',
        data: {
           pros:''
        },
        busy: false,
        methods: {
            loadMore: function () {
                this.busy = true;
                var vm = this;
                if (totrue){
                vm.$http.get('/Json/ShowthePro?page=' + pages).then(
                    function (response) {
                        var list1 = response.data.pros;
                        var count = response.data.count;
                        console.log(count);
                        if (vm.pros.length == 0) {
                            vm.pros = list1;
                        }
                        else {
                            if (pages <= parseInt(count)){
                            var list2 = vm.pros;
                            vm.pros = list2.concat(list1);
                          
                            }
                            else {
                                totrue = false;
                            }
                        }
                        pages++;
                        setTimeout(() => {
                            vm.busy = false;
                        }, 1000);
                    });
                } else {

                }
                //End fro loadMore

            }
        }
       
    })

每次开始一个新的框架或者新的语言，就像初恋中的男女一样，在没有确定关系之前各种试探各种伤害，等到完全上手以后，各种温柔各种甜蜜~~