Html
    Css
    Js

    
                        
* {
	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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.0.0
 立即下载

jQuery上拉加载更多

注:请在移动端查看上拉, 下拉加载更多效果

前言:

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

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

    所以,就想在不用插件的情况下,自己写一个上拉加载更多的功能,和大家一起分享。如有更好解决办法的朋友,欢迎指导!

原理:

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

问题:

    在写的过程中发现一个问题,就是判断滚动条的位置是否到达底部时 不能用等于 == (因为滚动条在滚动时不一定会刚对等于底部的位置), 所以用 >= 大于或等于,可是 >=会使上拉加载方法执行很多次,从而导致一下子加载很多页的问题,如果你所加载的数据时有编号顺序的,那么会使编号顺序混乱,比如先加载第3页,再加载第2页(第1页没问题)等等。

解决办法:

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

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

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

 使用说明:

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

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

20
      袁颢0
      2021/12/14 23:49:40
      感谢分享,手机端,pc都测试通过,作者技术杠杠的 回复
      猪年大吉丶0
      2019/9/3 14:19:29
      大佬摸摸哒,非常有用,谢谢 回复
      CCC0
      2018/11/19 9:56:01

      写的很好,赞一个

      回复
      心之所向,愿之所在0
      2017/12/28 13:42:11

      up主,问下如果要在前端设置每页显示的数据条数该怎样设置?我这边后台是把数据一次性传过来。

          沐枫自然3
          2017/12/29 12:46:36

          前端的ajax请求后端接口时都要设置参数如:

          $.ajax({
              type: 'POST',
              url: 'http://www.xxxxxx.com/index.php',
              data: {
              	user: 'name', 
              	id: 666,
              	page: page,  //page是一个变量,第请求一次会向上加1 
              	num: 10  	 //num是每次要请求返回数据的条数(这里是每次10条,这个可以前端定(不建议),也可以后端定),一般是以数组、或 JSON格式返回的,就像下面的 data.result.list 这样就可以循环出来了。
              	},
              timeout: 60000,
              cache: false,
              beforeSend: function() {
              	//在这里,前端可以做一些加载中。。。。,或 载入中。。。。等等之类的动画。
              },
              dataType: 'JSON',
              contentType: "application/x-www-form-urlencoded;charset=utf-8",   
              async:false,
              success: function(data) {
                  if("" != data.result.list) {
                      let dom = ""
                      for(let i = 0; i < data.result.list.length; i++ ) {
                            dom += '<li>'data.result.list[i].smg'</li>';
                      }
                      $("#id").append(dom);
                      //当每次数据请求完成时,把上面做一些加载中。。。。,或 载入中。。。。等等之类的动画去掉。
                  } else {
                       console.log("没有数据啦,到底了,别扯啦!");
                  }
              }
              });
          }

          后端以PHP为例:

          <?php
          	
          	$page = intval($_POST['page']);  //每次请求都不一样的如:第一次是1,第二次是2,第三次。。。。。。。。
          	$num = intval($_POST['num']);    //这个一般不建议从前传过来,因为如果给传个1000000,那数据库就不被挂了,所以一般都是后端自已定义的。
          
          	//如果不查询数据库的话,最简单的就像下面这样做下判断,当然也可循环判断。
          	if($page == 1){
          		exit(json_encode('11111111111111111111111'))
          	}elseif($page == 2){
          		exit(json_encode('22222222222222222222222'))
          	}elseif($page == 3){
          		exit(json_encode('33333333333333333333333'))
          	}elseif($page == 4){
          		exit(json_encode('.......................'))
          	}
          
          	//如果要查询数据库的话,就把$page 和 $num 当做查询条件写到SQL语句里面去查询,这样可以根据每次前端传过来的参数 返回对应的数据了。
          	
          	select * from tableName where status = 1 limit ($num *($page-1)), $num  
          	
          	//大概的思路就这样,后端PHP我也不太懂,正在学习中,说错了别见笑哈,同时欢迎指证!!!
          ?>
      回复
      低俗小说丶??0
      2017/12/22 12:08:54

      刚好用的上,谢谢了

          沐枫自然0
          2017/12/22 20:05:40

          不客气,相互学习!

          沐枫自然0
          2017/12/29 12:40:36

          前端的ajax请求后端接口时都要设置参数如:

          $.ajax({
              type: 'POST',
              url: 'http://www.xxxxxx.com/index.php',
              data: {
              	user: 'name', 
              	id: 666,
              	page: page,  //page是一个变量,第请求一次会向上加1 
              	num: 10  	 //num是每次要请求返回数据的条数(这里是每次10条,这个可以前端定(不建议),也可以后端定),一般是以数组、或 JSON格式返回的,就像下面的 data.result.list 这样就可以循环出来了。
              	},
              timeout: 60000,
              cache: false,
              beforeSend: function() {
              	//在这里,前端可以做一些加载中。。。。,或 载入中。。。。等等之类的动画。
              },
              dataType: 'JSON',
              contentType: "application/x-www-form-urlencoded;charset=utf-8",   
              async:false,
              success: function(data) {
                  if("" != data.result.list) {
                      let dom = ""
                      for(let i = 0; i < data.result.list.length; i++ ) {
                            dom += '<li>'data.result.list[i].smg'</li>';
                      }
                      $("#id").append(dom);
                      //当每次数据请求完成时,把上面做一些加载中。。。。,或 载入中。。。。等等之类的动画去掉。
                  } else {
                       console.log("没有数据啦,到底了,别扯啦!");
                  }
              }
              });
          }

          后端以PHP为例:

          <?php
              $page = intval($_POST['page']);  //每次请求都不一样的如:第一次是1,第二次是2,第三次。。。。。。。。
              $num = intval($_POST['num']);    //这个一般不建议从前传过来,因为如果给传个1000000,那数据库就不被挂了,所以一般都是后端自已定义的。
              //如果不查询数据库的话,最简单的就像下面这样做下判断,当然也可循环判断。
              if($page == 1){
              exit(json_encode('11111111111111111111111'))
              }elseif($page == 2){
              exit(json_encode('22222222222222222222222'))
              }elseif($page == 3){
              exit(json_encode('33333333333333333333333'))
              }elseif($page == 4){
              exit(json_encode('.......................'))
              }
              //如果要查询数据库的话,就把$page 和 $num 当做查询条件写到SQL语句里面去查询,这样可以根据每次前端传过来的参数 返回对应的数据了。
              select * from tableName where status = 1 limit ($num *($page-1)), $num  
              //大概的思路就是这样,后端PHP我也不太懂,正在学习中,说错了别见笑哈,同时欢迎指证!!!
          ?>
          沐枫自然0
          2017/12/29 12:43:16

          后端以PHP为例:

          <?php
          	
          	$page = intval($_POST['page']);  //每次请求都不一样的如:第一次是1,第二次是2,第三次。。。。。。。。
          	$num = intval($_POST['num']);    //这个一般不建议从前传过来,因为如果给传个1000000,那数据库就不被挂了,所以一般都是后端自已定义的。
          
          	//如果不查询数据库的话,最简单的就像下面这样做下判断,当然也可循环判断。
          	if($page == 1){
          		exit(json_encode('11111111111111111111111'))
          	}elseif($page == 2){
          		exit(json_encode('22222222222222222222222'))
          	}elseif($page == 3){
          		exit(json_encode('33333333333333333333333'))
          	}elseif($page == 4){
          		exit(json_encode('.......................'))
          	}
          
          	//如果要查询数据库的话,就把$page 和 $num 当做查询条件写到SQL语句里面去查询,这样可以根据每次前端传过来的参数 返回对应的数据了。
          	
          	select * from tableName where status = 1 limit ($num *($page-1)), $num  
          	
          	//大概的思路就这样,后端我也太懂,说错了别见笑哈,同时欢迎指证!!!
          ?>
      回复
      superXJg0
      2017/12/17 17:50:02

      我要一个加载中  然后没有更多数据了   怎么弄呀

          superXJg0
          2017/12/17 17:54:36

          找到了  没认真看  尴尬

          沐枫自然1
          2017/12/18 20:50:41

          在ajax请求方法中做一下判断就行了:

          function LoadingDataFn() {
              $.ajax({
              type: 'POST',
              url: 'http://www.xxxxxx.com/index.php',
              data: {user: 'name', id: 123},
              timeout: 60000,
              cache: false,
              beforeSend: function() {},
              dataType: 'JSON',
              contentType: "application/x-www-form-urlencoded;charset=utf-8",   
              async:false,
              success: function(data) {
                  if("" != data.result.list) {
                      let dom = ""
                      for(let i = 0; i < data.result.list.length; i++ ) {
                            dom += '<li>'data.result.list[i].smg'</li>';
                      }
                      $("#id").append(dom);
                  } else {
                       console.log("没有数据啦,到底了,别扯啦!");
                  }
              }
              });
          }

          当ajax在请求后端时,直到没有数据返回时,向上面一样w判断一下就OK了!

      回复
      浅念。0
      2017/11/16 16:44:33

      前边几个不好使,一直是window。scroll在动,一注释就不动了

          沐枫自然0
          2017/11/17 0:00:39

          前边几个是指定要在哪个元素中滚动,而window滚动是指定整个窗口,二者尽量不要同时用,这样体验效果不太好(特殊情况除外)。

      回复
      一缕阳光0
      2017/11/15 15:10:06

      LoadingDataFn这个用来加载数据,我可以把向后台请求数据ajax方法放这里吧?我想要设置每页显示多少是怎么设置呢?是直接初始化一个每页显示条数,直接传给后台吗?谢谢呢!

          沐枫自然3
          2017/11/16 23:55:04
          function LoadingDataFn() {
              $.ajax({
          	type: 'POST',
          	url: 'http://www.xxx.com/index.php',
          	data: {user: 'name', id: 123},
          	timeout: 60000,
          	cache: false,
          	beforeSend: function() {},
          	dataType: 'JSON',
          	contentType: "application/x-www-form-urlencoded;charset=utf-8",   
          	async:false,
          	success: function(data) {
          	    if(data.result == 1) {
          	        console.log(data.result.msg);
          	    }
          	}
              });
          }

          1、向后台请求数据ajax方法(就是 LoadingDataFn())放在如上这个例子里。

          2、想要设置每页显示多少条数据一般是后台设置的,(也可以是前端传过去的,这个和后端的协商好就行了,其是很简单,就是你每次上拉请求的时候比如传个30,让后端每次给你返回30条数就OK了)。

          3,当刚一打开进入这个页面的时候就要向后端请求一次数据,然后就是每当(当滚动条的位置到达底部)一次就请求一次后端,页码(page)就向上加1,一直请求到后端没有数据时就做一下提示,比如我们经常看到一些手机页面会提示:别扯啦,到底啦,我是有底限的。。。哈哈!

          一缕阳光0
          2017/11/17 9:14:29

          嗯嗯,我试试,谢谢呢

          沐枫自然0
          2017/11/18 19:19:17

          不客气,相互学习!

      回复
      咖啡加冰0
      2017/9/14 11:48:14

      厉害!希望能多分享一些功能!jq插件库是授人以鱼,作者是授人与渔

          沐枫自然0
          2017/9/14 22:07:33
          过奖了,相互学习,共同进步!
      回复