PROMULGATOR
沐枫自然
上海市徐汇区漕河泾数据中心- 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上拉加载更多
代码描述：纯Js，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
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
-
过奖了，相互学习，共同进步！