Sample code sharing for unlimited loading and pagination on mobile terminals based on JavaScript

This article mainly introduces in detail the implementation of unlimited loading and paging on the mobile terminal based on JavaScript, which has certain reference value. Interested friends can refer to the examples of

I have shared with you the specific code for implementing infinite loading and pagination on the mobile terminal in js for your reference. The specific content is as follows

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

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

Idea:

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

Code sample

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

The above is the detailed content of Sample code sharing for unlimited loading and pagination on mobile terminals based on JavaScript. For more information, please follow other related articles on the PHP Chinese website!