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!