vue分页实现触底加载

  在要实现滚动加载的列表上上添加v-infinite-scroll，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法

v-infinite-scrol : load无限滚动加载的方法
infinite-scroll-disabled : 是否禁用无限滚动加载
infinite-scroll-delay : 节流时延，单位为ms
infinite-scroll-distance: 触发加载的距离阈值，单位为px
infinite-scroll-immediate: 是否立即执行加载方法，以防初始状态下内容无法撑满容器。

代码片段

 <div  v-infinite-scroll="getList" infinite-scroll-disabled="disabled" infinite-scroll-distance="10" :style="{ height: tableHeight, overflowY: 'auto' }">
        <div v-for="(item, index) in doctorOrderList" :key="index">
          <div style="width:100px;height:100px;background-color: aliceblue; margin: 10px;">{{ index }}</div>
        </div>
      </div>

 data(){
    return{
      disabled: false,
      doctorOrderList:[],
      tableHeight: document.documentElement.scrollHeight - 210 + "px",
      tableWith: document.documentElement.scrollWidth - 280 + "px",

    }
  },

  created(){
    this.getList()
  },
  methods:{
    getList(){
      this.disabled = true;
          for(let i=0;i<10;i++){
            this.doctorOrderList.push({name:1})
          }
          this.disabled = false;
    }

  }

2.实现分页触底加载

    getList() {   //总页数=数据库中总的记录数/每页显示的记录数
      let allPage = Math.ceil(this.allTotal / this.queryParams.pageSize);
      // 当前页码大于总页数 停止不执行
      if (this.queryParams.pageNum > allPage) return false;
          //无限滚动加载
      this.disabled = true;
      this.loading = true;
       //后端请求
      test(this.queryParams).then((response) => {
 
          const { rows, total } = response;
         //数据库中总的记录数
         this.allTotal = total;
            //添加对象
          this.doctorOrderList.push(...rows);
            //页数
          this.queryParams.pageNum++;
           
          //禁用无限滚动加载
          this.disabled = false;
            this.loading = false
        })
        .catch(() => {
 
        });
  
    },

data(){
return{
      queryParams: {
        pageNum: 1,
        pageSize: 25,
         },
      loadiing:false,
      disabled:false,
      allTotal:false,
      doctorOrderList:[],
      tableHeight: document.documentElement.scrollHeight - 210 + "px",
      tableWith: document.documentElement.scrollWidth - 280 + "px",


}
}