El lado de vue PC se despliega hasta el fondo, solicitando datos de paginación

¿Cómo el lado de la PC toca fondo y pagina para solicitar nuevos datos? El método proporcionado aquí se divide en tres pasos en total

  1. Agregue el método correspondiente de procesamiento de eventos de escucha en montado
window.addEventListener('scroll', this.scrollBottom)
  1. Agregue el método de evento en métodos, el siguiente código:
scrollBottom() {
    
    
		// 变量scrollTop为当前页面的滚动条纵坐标位置
        let scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        // 变量 windowHeight 是可视区的高度
        let windowHeight =
          document.documentElement.clientHeight || document.body.clientHeight;
        // 变量 scrollHeight 是滚动条的总高度
        let scrollHeight =
          document.documentElement.scrollHeight || document.body.scrollHeight;
		// 到底的条件
        if (
          scrollTop + windowHeight == scrollHeight
        ) {
    
    
		//到底后要去触发的事件
        if (this.page*10 >=this.total) return this.$message('数据加载完毕')
        if(this.isLoading)return //控制节流
        this.page++
        this.getOrderList() //请求数据
   }
},
  1. beforeDestroyEs necesario destruir y eliminar los eventos de escucha agregados en el ciclo de vida de vue para evitar errores.
window.removeEventListener('scroll', this.scrollBottom)

¡Después de completar los pasos anteriores, se completa la solicitud de paginación inferior!

Supongo que te gusta

Origin blog.csdn.net/qq_38188228/article/details/125077671
Recomendado
Clasificación