当前位置: 首页 > 编程笔记 >

基于JavaScript实现移动端无限加载分页

容柏
2023-03-14
本文向大家介绍基于JavaScript实现移动端无限加载分页,包括了基于JavaScript实现移动端无限加载分页的使用技巧和注意事项,需要的朋友参考一下

本文实例为大家分享了js实现移动端无限加载分页的具体代码,供大家参考,具体内容如下

原理:当滚动条到达底部时,执行下一页内容。

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

思路:

    1.使用fixed定位加载框
    2.使用$(window).scroll();方法来触发是否加载
    3.通过 真实内容高度 - 视窗高度 - 上面隐藏部分 < 10 ,作为加载触发的条件

代码样例

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍基于javascript实现图片懒加载,包括了基于javascript实现图片懒加载的使用技巧和注意事项,需要的朋友参考一下 一、定义   图片延迟加载也称为懒加载,延迟加载图片或符合某些条件时才加载某些图片,通常用于图片比较多的网页。可以减少请求数或者延迟请求数,优化性能。  二、呈现形式 【1】延时加载,使用setTimeout或setInterval进行加载延迟,如果用户在加载

  • 本文向大家介绍基于javascript实现图片预加载,包括了基于javascript实现图片预加载的使用技巧和注意事项,需要的朋友参考一下 一、定义 预加载图片是提升用户体验的一个好办法,提前加载用户所需的图片,保证图片快速、无缝发布,使用户在浏览器网站时获得更好用户体验。常用于图片画廊等应用中。 [注意]若使用即时加载,加载的图片与页面的其他内容一起加载会增加页面的整体加载时间,所以使用wind

  • 本文向大家介绍基于JavaScript实现表格滚动分页,包括了基于JavaScript实现表格滚动分页的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现表格滚动分页展示的具体代码,供大家参考,具体内容如下 CSS: JS: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍基于javascript实现页面加载loading效果,包括了基于javascript实现页面加载loading效果的使用技巧和注意事项,需要的朋友参考一下 本文实为大家分享了javascript实现页面加载loading效果,供大家参考,具体内容如下 效果图: 以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

  • 本文向大家介绍基于JavaScript实现鼠标箭头移动图片跟着移动,包括了基于JavaScript实现鼠标箭头移动图片跟着移动的使用技巧和注意事项,需要的朋友参考一下 我们经常在一些网站上看到,鼠标在网页上移动,有一张图片跟着鼠标移动。大家知道这种效果是怎么做出来的吗?你可能感到比较复杂,其实他是用js编一段小程序来实现的,且代码简单,比较好理解。下面我就来分享下实现代码。 关键代码如下所示: 以

  • 本文向大家介绍Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法,包括了Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法的使用技巧和注意事项,需要的朋友参考一下 通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无