vue加载更多

//很low的加载更多，仅供自己参考，如若有更好的欢迎提出

1、加载更多在很多评论、列表中有广泛应用，思路就是每页10条的话，滚到底部后触发一个事件，在mounted中写上事件

window.addEventListener('scroll', this.handleScroll)，其中this.handleScroll指的是methods中的一个方法，

2、有了滚到底部的方法后，就需要搞清楚如何实现分页或者说是加载跟多，后台是这样的，如果有32条数据，每页十条则有四页，当你传参为1时，返回前十条，2时返回11~20条，以此类推，有点思路就是要动态改变传参，换过来想就是滚到底部时让一个参数++的方式动态改变传的参数。

3、此时需要注意两个问题，到底是合并两个数组还是等号赋值数组，问题情境（1）当数据库一共有八条数据，但是已经到底部，假设list是你定义的空数组，而data是返回的数组。数据不到十条，你用list = data完全没有问题，而要是数据较多，当传参变化时你用等号，当前的list永远就等于后台返回的，而后台返回的数据总是一部分一部分的。（2）如果你用数组的concat（）方法，那么当数据大于十条时完全没有问题，而小于十条时就出现前八条 16 24这种样子，因为总是返回的是这八条数据，又合并bug不断。理想的方法是分情况用concat

html部分

<div class="moreinfo" v-if="flag">
                   <span>加载中</span>
                   <a class="active">
                       <span class="mui-spinner"></span>
                   </a>
     </div>
   <div class="noinfo" v-if="noinfo">已加载全部数据</div>

data部分：

data: {
                   num: 1,
                   flag: false,
                   noinfo: false,
                   totalPage: '',
                   temp:false,

               },

handleScroll: function() {
                       var that = this
                       if($(window).scrollTop() >= $(document).height() - $(window).height()) {
                           that.temp = false //temp决定了是用 = 还是用cancat
                           that.flag = true //flag决定是否显示加载中字样
                           that.num ++ //传入后端的页数
                           if(that.totalPage<that.num){ //totalPage是后端返回来的总页数
                               //即使没有发起请求也要有加载的动作
                               setTimeout(function(){
                                   that.noinfo = true //noinfo 决定是否显示“已加载全部”
                               that.flag =false
                               },500)
                               that.noinfo =false
                               return
                           }else{
                               that.temp = true
                               that.jydetail() //后端请求的方法
                           }
                       }

猜你喜欢