Maison > php教程 > PHP开发 > Adaptation de la pagination et du pied de page du site Web implémentée par chargement paresseux

Adaptation de la pagination et du pied de page du site Web implémentée par chargement paresseux

高洛峰
Libérer: 2016-12-27 15:40:55
original
1271 Les gens l'ont consulté

Je travaillais récemment sur la version mobile et j'ai découvert qu'il existe très peu de contrôles jq pour l'actualisation déroulante et le chargement pull-up, et j'ai l'impression qu'ils ne sont pas faciles à utiliser, comme iscroll...

Ensuite, j'en ai écrit un moi aussi. Très simple, le code le plus basique [ne le vaporisez pas si vous ne l'aimez pas, mais c'est assez pratique]

Chargement paresseux et pagination sur téléphone mobile wap :

Citer jquery.js avant de l'utiliser

var current = 1;
 $(function() {
  $('body').bind('touchmove', function(e) {
    if($(this).scrollTop() > ($(window).height() * current - 150)) {//这里的150表示距离底部150像素触发,可自行调节
    current++;
    console.log("第" + current + "页");
    //这里放你的分页代码
   }
  });
 });
Copier après la connexion

if($(this).scrollTop()= =0){//Voici le code d'actualisation du wap, veuillez l'utiliser ensemble si nécessaire

Chargement paresseux de la pagination côté ordinateur Web :

Citer jquery.js avant de l'utiliser

var current = 1;
  $(function() {
   window.onscroll = function() {
    if($(document).scrollTop() >= ($(document).height() - $(window).height() - 150)) {//150与wap手机端一样
     current++;
     //这里放你的分页代码
    }
   }
  });
Copier après la connexion

if($(document). scrollTop()==0){//Voici le code d'actualisation Web, veuillez l'utiliser ensemble si nécessaire}

Le bas du footer côté ordinateur web est corrigé :

.footer.position {
 position: absolute;
 bottom: 0;
}
Copier après la connexion

$(function() {
   auto();
   window.onresize = function() {
    auto();
   }
  });
  function auto() {
   if($(window).height() > 917) {//917可自行调整,根据页面的内容高度
    $(".footer").addClass("position");
   } else {//.position见css
    $(".footer").removeClass("position");
   }
  }
Copier après la connexion

Un autre méthode [Recommandé]

function auto() {
   $("body").scrollTop(1); //控制滚动条下移1px
   if($("body").scrollTop() > 0) {
    $(".footer").removeClass("position");
    alert("有滚动条");
   } else {
    $(".footer").addClass("position");
    alert("没有滚动条");
   }
   $("body").scrollTop(0); //滚动条返回顶部
  }
Copier après la connexion

Ci-joint deux photos de comparaison avant et après, pied de page fixe en bas

Adaptation de la pagination et du pied de page du site Web implémentée par chargement paresseux

Adaptation de la pagination et du pied de page du site Web implémentée par chargement paresseux

Ce qui précède est l'intégralité du contenu de cet article. J'espère que le contenu de cet article pourra apporter certains avantages à l'étude ou au travail de chacun, et j'espère également soutenir le PHP chinois. site web!

Pour plus d'articles liés à l'adaptation de la pagination et du pied de page de site Web implémentée par le chargement paresseux, veuillez faire attention au site Web PHP 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
Recommandations populaires
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal