JS realizes unlimited loading and paging function on mobile terminal

This time I will bring you JS to achieve unlimited loading on the mobile terminalPaging function, what are the precautions for JS to achieve unlimited loading and paging function on the mobile terminal, as follows This is a practical case, let’s take a look at it.

Principle: When the scroll bar reaches the bottom, execute the content of the next page.

Judge conditions need to understand three concepts:
1.scrollHeight The height of the real content
2.clientHeight The height of the window, that is, the height of the content that can be seen in the browser
3.scrollTop The hidden part of the window, that is, the scrolling distance of the scroll bar

Ideas:

1. Use fixed to position the loading box
2. Use $ (window).scroll(); method to trigger whether to load
3. Use the real content height-window height-the hidden part above

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); //绑定滚动事件

I believe I read the case in this article You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Angular2 development component step-by-step explanation

JS implements simple four arithmetic operations

The above is the detailed content of JS realizes unlimited loading and paging function on mobile terminal. For more information, please follow other related articles on the PHP Chinese website!