vue无插件实现ajax无限滚动加载，详细案例

最近在研究vue与mui混合开发，首先遇到的一个问题就是vue的无限滚动加载，因为它与常规的js，jquery不同，一般这两个玩意都是在方法里面进行循环，然后一起输出到页面，最后就是滚动到底部就累加。但是vue不是，它是直接定义一个数组，然后直接在页面上进行输入，所以完全没有什么don累加这个操作。
在做的过程中，也在百度上查询了很多，仍旧如我所预料的，不是教程没点用就是严重过时，还有些是直接把简单的东西加插件折腾出乱七八糟的一大堆，简直了一点有用的都没有。不过总算，还是解决了，原理也很简单，就是数组累加就行了。

所以说，网上那种一大页代码的实现方案是有多坑啊。

教程开始：

我使用的天行云api的在线接口，请求格式如下：

http://api.tianapi.com/caijing/index?key=我自己的keyid&num=10&page=1

vue初始字段先定义好：

data:{
    url:'',
    page:1,
    info:[]
},

这里主要有用处的定义是当前的分页，和文章的整个数组。

请求和无限加载的方法页定义好：

mounted:function(){
    var that = this;
    this.send(this.page);
},
methods:{
    send:function(page){
        const that = this;
        axios({
          method: 'get',
          url: 'http://api.tianapi.com/caijing/index?key=我自己的keyid&num=10&page='+page
        })
        .then(function (response) {
          
          that.info = that.info.concat(response.data.newslist);
        })
        .catch(function (error) {
          console.log(error)
        })
    
     },
    more() {
        this.page++
        this.send(this.page);
    },
    
},

这里主要包括了两个方法，send()负责请求ajax并且将其中的数组提取，累加到info数组，同时在页面加载的时候也就触发。其次是分页累加方法more()，每一次触发都会让page加1，表示将加载下一页。

DOM层里的案例是这样（记得去除xml标签）：

<xmp><ul class="mui-table-view">
    <li class="mui-table-view-cell mui-media shu" v-for="item in info">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" :src="item.picUrl">
            <!-- <p>{{item.url}}</p> -->
            <div class="mui-media-body">
                <p class="mui-ellipsis">{{item.title}}</p>
                <p>{{item.description}}</p>
                <p>{{item.ctime}}</p>
            </div>
        </a>  
    </li>
    <div class="more" @click="more();">
      加载更多
    </div>
</ul><\xmp>

到这一步的时候，点击底部的“加载更多”就可以继续无刷新累加内容，但是还没有做到自动的滚动刷新。

无限滚动加载的实现：

created(){
    window.onscroll = function(){
        var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
        var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
        if(scrollTop*1+1+windowHeight>scrollHeight){
            vm.more();
        }
    };
},

这里使用的是原生js的方法，判断滚动条是否到达了页面底部，如果到达就执行之前定义的more()方法，于是效果就很好的实现了。

全部代码

<div id="app">
    <ul class="mui-table-view">
    <li class="mui-table-view-cell mui-media shu" v-for="item in info">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" :src="item.picUrl">
            <!-- <p>{{item.url}}</p> -->
            <div class="mui-media-body">
                <p class="mui-ellipsis">{{item.title}}</p>
                <p>{{item.description}}</p>
                <p>{{item.ctime}}</p>
            </div>
        </a>  
    </li>
    <div class="more" @click="more();">
      加载更多
    </div>
    
</ul>
</div>
<script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            url:'',
            page:1,
            info:[]
        },
        mounted:function(){
            var that = this;
            this.send(this.page);
        }
        ,
        created(){
            window.onscroll = function(){
                var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
                var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
                if(scrollTop*1+1+windowHeight>scrollHeight){
                    vm.more();
                }
            };
        },
        methods:{
            send:function(page){
                const that = this;
                axios({
                  method: 'get',
                  url: 'http://api.tianapi.com/caijing/index?key=我自己的keyid&num=10&page='+page
                })
                .then(function (response) {
                  
                  that.info = that.info.concat(response.data.newslist);
                })
                .catch(function (error) {
                  console.log(error)
                })
            
             },
            more() {
                this.page++
                this.send(this.page);
            },
        },
    })
</script>

效果如下：

打赏