Le côté Vue PC descend vers le bas, demandant des données de pagination

Comment le côté PC atteint-il le fond et pagine-t-il pour demander de nouvelles données ? La méthode fournie ici est divisée en trois étapes au total

  1. Ajoutez la méthode correspondante de traitement des événements d'écoute dans monté
window.addEventListener('scroll', this.scrollBottom)
  1. Ajoutez la méthode d'événement dans les méthodes, le code suivant :
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. beforeDestroyIl est nécessaire de détruire et de supprimer l'événement d'écoute ajouté dans le cycle de vie de vue pour éviter les rapports d'erreur
window.removeEventListener('scroll', this.scrollBottom)

Une fois les étapes ci-dessus terminées, la demande de pagination du bas est terminée !

Je suppose que tu aimes

Origine blog.csdn.net/qq_38188228/article/details/125077671
conseillé
Classement