Maison > interface Web > js tutoriel > le corps du texte

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

黄舟
Libérer: 2017-03-27 14:12:09
original
2545 Les gens l'ont consulté

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);  //绑定滚动事件
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!