* { 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; }
注:请在移动端查看上拉, 下拉加载更多效果
由于,不管是在PC端,还是在移动端,上拉加载更多这个功能可以说是少不了的,尤其是在移动端。
在写这个上拉加载更多这个功能之前,我也用过一些比如 iscroll.js之类的等等插件。 但是,在使用过程中发现一系列问题。比如:首先至少得引入相应的CSS文件和JS文件吧,其次在你使用时必须按照它规定的格式去写,不然就不行。还有在1个页面中有多个上拉加载更多功能, 想改样式也很不方便等等。
所以,就想在不用插件的情况下,自己写一个上拉加载更多的功能,和大家一起分享。如有更好解决办法的朋友,欢迎指导!
根据布局,给window, 或者某个DIV元素加个scroll事件。当用户上滑时,判断滚动条的位置是否到达底部,如果到达底部,则执行加载下一页方法。
在写的过程中发现一个问题,就是判断滚动条的位置是否到达底部时 不能用等于 == (因为滚动条在滚动时不一定会刚对等于底部的位置), 所以用 >= 大于或等于,可是 >=会使上拉加载方法执行很多次,从而导致一下子加载很多页的问题,如果你所加载的数据时有编号顺序的,那么会使编号顺序混乱,比如先加载第3页,再加载第2页(第1页没问题)等等。
在JS代码中 分别以滚动加载方法1 和 滚动加载方法2 列出了对应的解决办法。
思路1:当滚动条的位置到达底部时,再用一个判断来决定是否加载数据,其是就是一个开关,这个开关默认是false, 只有当数据加载完成时,才设为true。
思路2:当滚动条的位置到达底部时,延时执行加载数据方法(并在延时执行之前,先清空之前的定时器)。
1、在JS代码中已经有非常详细的注释和说明。
2、该功能(上拉加载更多)除jQuery以外,没有使用基他任何插件。
up主,问下如果要在前端设置每页显示的数据条数该怎样设置?我这边后台是把数据一次性传过来。
前端的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我也不太懂,正在学习中,说错了别见笑哈,同时欢迎指证!!! ?>
刚好用的上,谢谢了
前端的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我也不太懂,正在学习中,说错了别见笑哈,同时欢迎指证!!! ?>
后端以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 //大概的思路就这样,后端我也太懂,说错了别见笑哈,同时欢迎指证!!! ?>
我要一个加载中 然后没有更多数据了 怎么弄呀
在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了!
前边几个不好使,一直是window。scroll在动,一注释就不动了
LoadingDataFn这个用来加载数据,我可以把向后台请求数据ajax方法放这里吧?我想要设置每页显示多少是怎么设置呢?是直接初始化一个每页显示条数,直接传给后台吗?谢谢呢!
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,一直请求到后端没有数据时就做一下提示,比如我们经常看到一些手机页面会提示:别扯啦,到底啦,我是有底限的。。。哈哈!
厉害!希望能多分享一些功能!jq插件库是授人以鱼,作者是授人与渔