欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-29 08:13:54
...

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
    }
}

效果图展示:类似于这种样式,由于上述代码列表数据不足,故演示另一部分的样式
用无限滚动vue-infinite-scroll实现分页加载

配置参数记录

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且滚动到底,回调函数才会执行