用无限滚动vue-infinite-scroll实现分页加载

npm安装

npm install vue-infinite-scroll --save

main.js引入

import infiniteScroll from 'vue-infinite-scroll'

Vue.use(infiniteScroll)

使用

逻辑：页面每次接收10条数据，当距离底部10px时触发回调函数，接收下一页的数据

<ul
	class="infinite-list"
	v-infinite-scroll="tx_load"
	infinite-scroll-disabled="disabled_x"
	infinite-scroll-distance="10"
	style="overflow:auto;padding: 5px;"
>
    <li v-for="(item, index) in bjtx_list" class="tx-list-item">
      <div class="item_tx">
        <div class="tx_touxiang">
          <img v-if="item.Avatar" :src = "ImgUrl + item.Avatar" alt="">
          <img v-else src = "http://192.168.1.120:8095/static/img/defultAvatar.08d3261.png" alt="" />
         </div>
        <span>{{ item.Name }}</span>
       </div>
    </li>
</ul>

data(){
	return{
		bjtx_page: 1,
      	bjtx_rows: 10,
      	bjtx_list: [], // 班级同学列表
        bjtx_count: "", // 班级总共多少同学
        
		disabled_x: false,     // 表示是否执行同学回调函数触底事件
	}
}

methods:{
// ----------------------------同学触底事件----------------
    tx_load() {
      this.disabled_x = true
      if (this.bjtx_count) {
        if (this.bjtx_count > this.bjtx_list.length) {
          this.bjtx_page = this.bjtx_page + 1;
          let params = {
            clsid: this.res.clsid,
            page: this.bjtx_page,
            rows: this.bjtx_rows
          };
          this.$api.classInfo.GetStudentList(params).then(res => {
            // console.log(res);
            if (res.status == 0) {
              // console.log(res);
              this.bjtx_list = this.bjtx_list.concat(res.List);
              this.bjtx_count = res.count;
            } else {
              // this.$message({
              //   showClose: false,
              //   message: res.msg,
              //   type: "error",
              //   duration: 1500
              // });
            }
          });
        } else {
          // this.$message({
          //   showClose: false,
          //   // message: "已经到底了",
          //   type: "warning",
          //   duration: 1500
          // });
        }
      } else {
        // console.log("123456");
      }
      this.disabled_x = false
    }
}

效果图展示：类似于这种样式，由于上述代码列表数据不足，故演示另一部分的样式

配置参数记录

v-infinite-scroll=“loadMore” ：表示会触发回调函数tx_load
infinite-scroll-distance=“10”：表示距离底部10px时会触发该事件
infinite-scroll-disabled=“busy”：表示由变量busy决定是否执行loadMore，false则执行loadMore，true则不执行，注意，busy表示繁忙，繁忙的时候是不执行的。
infinite-scroll-immediate-check： 默认值为true，该指令表示，应该在绑定后立即检查busy的值和是否滚动到底。假如你的初始内容高度不够，不足以填满可滚动的容器的话，你应设为true，这样会立即执行一次loadMore，会帮你填充一些初始内容。
infinite-scroll-listen-for-event： 当事件在Vue实例中发出时，无限滚动将再次检查。
infinite-scroll-throttle-delay： 检查busy的值的时间间隔，默认值是200，因为vue-infinite-scroll的基础原理是，vue-infinite-scroll会循环检查busy的值，以及是否滚动到底，只有当：busy为false且滚动到底，回调函数才会执行