[vue] Enviar una solicitud para obtener datos cuando la barra de desplazamiento se desplaza hacia abajo

Cuando el back-end nos brinda una interfaz para obtener datos por paginación, nuestro front-end puede obtener todos los datos configurando el botón de paginación o juzgando la posición de la barra de desplazamiento, cuando la barra de desplazamiento se desplaza hacia abajo, envíe una solicitud para obtener los datos de la página siguiente, de modo que podamos obtener todos los datos sin configurar el botón de paginación.

Lo más importante para realizar esta función es juzgar la posición de la barra de desplazamiento:

Como se muestra abajo:

clientHeight indica la altura del área visible;

scrollTop indica la distancia desde la barra de desplazamiento hasta la parte superior del área visible;

scrollHeight indica la altura del contenido de desplazamiento;

De la figura anterior, podemos obtener las condiciones para que la barra de desplazamiento llegue al final:

scrollHeight = scrollTop + clientHeight

Código:

<template>
  <div>
    <div ref="scrollBox" class="box" @scroll="toLoadMore">
      <div v-for="item in boxData" :key="item.id">{
    
    {item.name}}</div>
      <div v-loading='loading'></div>
    </div>
  </div>
</template>

<script>
import { getEnumValuePage } from "@/api/index"
export default {
  data(){
    return {
      boxData: [],
      // 当前页码
      currentPage: 1,
      // 添加loading动画 
      loading: true,
      // 是否最后一页,如果最后一页了就不再发送请求了
      lastPage: false
    }
  },
  methods:{
    getBoxData(){
      this.loading = true
      //传给后端的参数
      let params = {
          currentPage: this.currentPage
        }
        //发送请求
        if(!this.lastPage){
          getEnumValuePage(params).then(res=>{
            if(res.status === 0){
              this.boxData.push(...(res.data.list))
              this.loading = false
              if(res.data.list.length < 36){ //一页总共36条数据，小于36条时，表示是最后一页了
                this.lastPage = true
              }
            }
          })
        }
    },
    toLoadMore(){
      let scrollDom = this.$refs.scrollBox
      // console.log(scrollDom.clientHeight,'clientHeight'); //scrollDom 可视区域的高 290px
      // console.log(scrollDom.scrollHeight,'scrollHeight'); //scrollDom 里面的内容的高
      // console.log(scrollDom.scrollTop,'scrollTop'); //滚动条距离scrollDom顶部的距离
      // 由于scrollTop不太准确，所以这里加了个1
      if(scrollDom.clientHeight + scrollDom.scrollTop + 1 >= scrollDom.scrollHeight){
        this.currentPage ++ //页数加一
        this.getBoxData() //发送请求获取数据
      }
    },
  },
  mounted(){
    this.getBoxData()
  }
}
</script>

<style scoped lang='scss'>
.box{
  width: 200px;
  height: 300px;
  border: 5px solid black;
  overflow-y: auto;
  &>div{
    padding-left: 15px;
    line-height: 30px;
    background: rgba(255, 192, 203, 0.7);
  }
}
</style>

Mostrar resultados: