现在开发项目很多时候依赖于插件,很少去手动实现一些实用的功能了,最近项目中用到了上拉加载(其实本心一直认为只要是列表性的东西就应该主动实现上拉加载,可是因为懒,很少弄,懒也是种病,得治
),项目中用了dropload插件,很快捷实现了,但还是觉得很繁琐,最近闲下来了,就试着自己实现一下,实现思路在代码中,不多说啦,代码如下,不足之处,多多指正!
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="black" name="apple-mobile-web-app-status-bar-style" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>上拉加载</title> <script src="js/useRem.js"></script> <link rel="stylesheet" href="css/reset.css" /> <style> * { margin: 0; padding: 0; list-style: none; font-size: 0.3rem; } li { height: 3rem; line-height: 3rem; text-align: center; border-bottom: 1px solid #ddd; } .more { width: 100%; font-size: 0.26rem; text-align: center; line-height: 0.8rem; display: none; } .loader-inner { width: 25px; height: 25px; margin: 0 auto; display: none; } .ball-clip-rotate>div { background-color: #000; border-radius: 100%; margin: 2px; -webkit-animation-fill-mode: both; animation-fill-mode: both; border: 2px solid #000; border-bottom-color: transparent; height: 25px; width: 25px; background: transparent !important; display: inline-block; -webkit-animation: rotate 0.75s 0s linear infinite; animation: rotate 0.75s 0s linear infinite; } .loader-inner p { display: none; } @keyframes rotate { 0% { -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); } 50% { -webkit-transform: rotate(180deg) scale(0.6); transform: rotate(180deg) scale(0.6); } 100% { -webkit-transform: rotate(360deg) scale(1); transform: rotate(360deg) scale(1); } } </style> </head> <body> <div class="load"> <!--列表区域--> <ul></ul> <!--loading图标--> <div class="loader-inner ball-clip-rotate"> <div></div> </div> <!--没有更多的提示--> <div class="more"> 没有更多 </div> </div> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/common.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //实现思路 //首先需要后台配合接口支持传递每页个数、页码、并可以返回总页码数 //确定首次进入渲染列表的个数,首次渲染1页 N个 以参数传递给后台,获取数据,渲染页面 //当距离顶部+当前高度 >=文档总高度 即代表滑动到底部 时,让页码page++, 再次触发获取列表的函数 //通过判断后台返回的总页数 == 我们的页数的时候赋值给isEnd为true,停止加载 var token = getToken('bulaapi_token'); var rank = getToken('rank'); var page = 1; var renderHtml = ''; var isEnd = false; getList(page); function getList(page) { //如果没有更多则返回 if(isEnd) { return } else { //否则加载更多 $('.loader-inner').show() $.ajax({ type: "post", url: wx_url + "v1/theworddaily/course_list", beforeSend: function(request) { request.setRequestHeader("Authorization", 'Bearer ' + token); }, data: { "class_open_id": rank, "paginate": 5, "page": page }, success: function(data) { $('.loading').hide(); for(var item of data.data) { renderHtml += `<li>${item.from_time}</li>` } $('.load ul').append(renderHtml) //需注意每次赋值后将html变量清空 renderHtml = ''; //当我们的page数 》= 后台返回的总页数时,不载加载 if(page >= data.last_page) { isEnd = true //将加载效果去掉 setTimeout(function() { $('.loader-inner').hide(); $('.more').show() }, 2000) } } }) } } scroll(); //封装滚动加载 function scroll() { //滚动条到页面底部加载更多案例 $(window).scroll(function() { var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度 var scrollHeight = $(document).height(); //当前页面的总高度 var clientHeight = $(this).height(); //当前可视的页面高度 if(scrollTop + clientHeight >= scrollHeight) { //距离顶部+当前高度 >=文档总高度 即代表滑动到底部 //滚动条到达底部 //将页数加1 page = page + 1; setTimeout(function() { getList(page) }, 1000) } else if(scrollTop <= 0) { //滚动条到达顶部 //滚动条距离顶部的高度小于等于0 TODO $('.loader-inner').hide(); } }); } </script> </body> </html>