JS réalise une fonction de chargement et de pagination illimitée sur le terminal mobile

Cette fois, je vous apporterai JS pour obtenir un chargement illimité sur le terminal mobileFonction de pagination Quelles sont les précautions pour que JS obtienne une fonction de chargement et de pagination illimitée sur. le terminal mobile, comme suit C'est un cas pratique, regardons-le.

Principe : Lorsque la barre de défilement atteint le bas, exécutez le contenu de la page suivante.

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 fixe pour positionner la boîte de chargement
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

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

Je crois l'avoir vu Vous maîtrisez la méthode dans le cas de cet article Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes du composant de développement Angular2

JS implémente quatre opérations arithmétiques simples

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!