时间: 2019-09-22阅读: 168标签: 上拉加载前言：

一、原理：当滚动条到达底部时，执行下一页内容。

由于，不管是在PC端，还是在移动端，上拉加载更多这个功能可以说是少不了的，尤其是在移动端。

判断条件需要理解三个概念：
    1.scrollHeight 真实内容的高度
    2.clientHeight 视窗的高度，即在浏览器中所能看到的内容的高度
    3.scrollTop 视窗上面隐藏掉的部分，即滚动条滚动的距离

在写这个上拉加载更多这个功能之前，我也用过一些比如iscroll.js之类的等等插件。 但是，在使用过程中发现一系列问题。比如：首先至少得引入相应的CSS文件和JS文件吧，其次在你使用时必须按照它规定的格式去写，不然就不行。还有在1个页面中有多个上拉加载更多功能， 想改样式也很不方便等等。

思路：
    1.使用fixed定位加载框
    2.使用$(window).scroll();方法来触发是否加载

原理：

10bet，    3.通过 真实内容高度 - 视窗高度 - 上面隐藏部分 < 5 ,作为加载触发的条件

根据布局，给window， 或者某个DIV元素加个scroll事件。当用户上滑时，判断滚动条的位置是否到达底部，如果到达底部，则执行加载方法。

问题：

JavaScript代码：第一种方式

在 在写的过程中发现一个问题，就是判断滚动条的位置是否到达底部时

<script type="text/javascript">
    var page=2; //当前页的页码
    var allpage; //总页码，会从后台获取
    var catid="{$catid}";
    function showAjax(page){
        $.ajax({
              url:"",
              type:"post",
              data:{page:page,catid:catid},
              success:function(data){
                //要执行的内容
                showContent(data);
              }
        })
    }
    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(pageHeight - viewportHeight - scrollHeight < 50){//如果满足触发条件，执行
            showAjax(page);
        }
    }
    function showContent(data){
      var list=eval('('+data+')');
      var ss='';
      for (var i in list) {
        ss=ss+'<li><a href="'+list[i]['url']+'">'+list[i]['title']+'</a></li>';
      }
      $(".minsuList").append(ss);
      page++;  //页数加1
    }
    $(window).bind("scroll",scrollFn);//绑定滚动事件
   </script>

不能用等于 == （因为滚动条在滚动时不一定会刚对等于底部的位置）， 所以用

大于或等于，可是=会使上拉加载方法执行很多次，从而导致一下子加载很多页的问题，如果你所加载的数据时有编号顺序的，那么会使编号顺序混乱，比如先加载第3页，再加载第2页（第1页没问题）等等。

解决办法：

在JS代码中 分别以滚动加载方法1 和滚动加载方法2 列出了对应的解决办法。

思路1：当滚动条的位置到达底部时，再用一个判断来决定是否加载数据，其是就是一个开关，这个开关默认是false, 只有当数据加载完成时，才设为true。

思路2：当滚动条的位置到达底部时，延时执行加载数据方法（并在延时执行之前，先清空之前的定时器）。

使用说明：

1、在JS代码中已经有非常详细的注释和说明。

2、该功能（上拉加载更多）除jQuery以外，没有使用基他任何插件。

html

header 首 页/header section  ul /ul/section footer  div 首页/div div商城/div div其他/div div我的/div/footer

css

* {margin:0px;padding:0px;}#header {position:fixed;top:0px;left:0px;width:100%;height:50px;background:#FAA732;text-align:center;line-height:50px;color:white;font-weight:bold;}#main {position:absolute;top:50px;left:0px;right:0px;bottom:51px;padding:10px;overflow:auto;}#main li {display:flex;margin-bottom:10px;padding:10px;border-bottom:1px solid gray;border-radius:4px;background:#EEE;}#main li img {flex:50px 0 0;width:50px;height:50px;padding:4px;border:1px solid green;}#main li span {padding-left:4px;line-height:24px;}#footer {display:flex;position:fixed;left:0px;bottom:0px;width:100%;height:50px;border-top:1px solid gray;background:#FAA732;}#footer div {flex:1;text-align:center;line-height:50px;color:white;font-weight:bold;border-right:1px solid white;}#footer div:nth-child(4) {border:none;}#footer .active {background:#0086FF;}

Js

var page = 1, //分页码 off_on = false, //分页开关(滚动加载方法 1 中用的) timers = null; //定时器(滚动加载方法 2 中用的) //加载数据var LoadingDataFn = function() { var dom = ''; for (var i = 0; i  20; i++) { dom += 'liimg src="-ssl.duitang.com/uploads/item/201409/12/20140912132553_5Wcx3.jpeg"/span上滑列加载表内容上滑列加载表内容上滑列加载表内容上滑列加载表内容/span/li'; } $('#list_box').append(dom); off_on = true; //[重要]这是使用了 {滚动加载方法1} 时 用到的 ！！！[如果用 滚动加载方法1 时：off_on 在这里不设 true的话， 下次就没法加载了哦！]}; //初始化， 第一次加载$(document).ready(function() { LoadingDataFn();}); //底部切换$(document.body).on('click', '#footer div', function() { $(this).addClass('active').siblings().removeClass('active');}); //滚动加载方法1$('#main').scroll(function() { //当时滚动条离底部60px时开始加载的内容 if (($(this)[0].scrollTop + $(this).height() + 60) = $(this)[0].scrollHeight) { //这里用 [ off_on ] 来控制是否加载 （这样就解决了 当上页的条件满足时，一下子加载多次的问题啦） if (off_on) { //off_on = false; //page++; //console.log("第"+page+"页"); //LoadingDataFn(); //调用执行上面的加载方法 } }}); //滚动加载方法2$('#main').scroll(function() { //当时滚动条离底部60px时开始加载的内容 if (($(this)[0].scrollTop + $(this).height() + 60) = $(this)[0].scrollHeight) { clearTimeout(timers); //这里还可以用 [ 延时执行 ] 来控制是否加载 （这样就解决了 当上页的条件满足时，一下子加载多次的问题啦） timers = setTimeout(function() { page++; console.log("第" + page + "页"); LoadingDataFn(); //调用执行上面的加载方法 }, 300); }}); //还可以基window窗口（body）来添加滚动事件, (因为布局不同,所以在这里没效果，因为[上面是基于body中的某个元素来添加滚动事的])$(window).scroll(function() { //当时滚动条离底部60px时开始加载的内容 if (($(window).height() + $(window).scrollTop() + 60) = $(document).height()) { clearTimeout(timers); timers = setTimeout(function() { page++; console.log("第" + page + "页"); LoadingDataFn(); }, 300); }});

<script>

    var catid="6";
      var url="/index.php?m=content&c=index&a=ajax_content";
      var p=2;
      $(window).bind("scroll",function(){
      var winHeight = window.innerHeight ? window.innerHeight : $(window).height(); // iphone fix
      var closeToBottom = $(window).scrollTop() + winHeight > $(document).height() - 50;

      if(parseInt($("#pages a:nth-last-child(2)").text())<p){
        $(".page_loading").html('已经最底部了...');
        return false;
      };

      if(closeToBottom){
        ajax_content();
      }      
     });

    function ajax_content(){
             $.post(url,{catid:catid,p:p},function(res){
                 tplshow(res); 
        },"json");
             p++;
    }

    function tplshow(res){
             var datas=res.lists;
             var appendli="";
             for(var i=0;i<datas.length;i++){
              var data=datas[i];
                 if(data.title!=""){
                     appendli+='<li>'+data.title+'</li>'
                 }
             }
             var $appendli=$(appendli);
             $(".modlenews").append($appendli);
    }


    function timeConver(time){
        var time= new Date(parseInt(time));
        var hour = time.getHours();
        var minute = time.getMinutes();
        return [hour,minute].join(':');
    }
</script>

本文由10bet发布于Web前端,转载请注明出处：jquery实现上拉加载更多10bet

关键词：