Partage d'exemples de code pour un chargement et une pagination illimités sur des terminaux mobiles basés sur JavaScript

Cet article présente principalement en détail la mise en œuvre du chargement et de la pagination illimités sur le terminal mobile basé sur JavaScript. Les amis intéressés peuvent se référer à l'exemple de

. dans cet article. J'ai partagé avec vous le code spécifique pour implémenter le chargement et la pagination infinis sur le terminal mobile en js pour votre référence. Le contenu spécifique est le suivant

Principe : Quand le. la barre de défilement atteint le bas, le contenu de la page suivante est exécuté.

Les conditions de jugement doivent comprendre trois concepts :
1.scrollHeight La hauteur du contenu réel
2.clientHeight La hauteur de la fenêtre, c'est-à-dire la hauteur du contenu visible dans le navigateur
3.scrollTop La partie cachée de la fenêtre, c'est-à-dire la distance de défilement de la barre de défilement

Idée :

1 .Utiliser la boîte de chargement à positionnement fixe
2 .Utilisez la méthode $(window).scroll(); pour déclencher le chargement
3. Utilisez la hauteur réelle du contenu - hauteur de la fenêtre - la partie cachée au-dessus

exemple de code

var page=1; //当前页的页码
      var flagNoData = false; //false
    var allpage; //总页码，会从后台获取
    function showAjax(page){
      $.ajax({
        url:"",
        type:"",
        data:"",
        success:function(data){
          //要执行的内容
          showContent();
            if(page>=data.allpage){ //当前页码大于等于总页码
            flagNoData = true;
            };
          page+=1;  //页数加1
        }
      })
    }
    function scrollFn(){
      //真实内容的高度
      var pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight);
      //视窗的高度
      var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
      //隐藏的高度
      var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
        if(falgNoData){ //数据全部加载完了
         return;
        }else if(pageHeight - viewportHeight - scrollHeight < 10){  //如果满足触发条件，执行
        showAjax(page);
      }
    }
    $(window).bind("scroll",scrollFn);  //绑定滚动事件

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!