html5 加载下一页,html5上划实现分页加载
一.功能分析
当页面有许多相同类型数据需要加载,而且单个屏幕不足以显示这些内容,就需要使用分页加载方法,在手机客户端,一般都是使用上划下划的方式,为了有更好的用户体验,还需要在加载数据前,显示类似“加载中...”的提示,在数据加载完成后,隐藏加载提示。
二.滑动加载实现方法
1.实现方法1
可使用jQuery的scroll(滑动)事件来触发,用当前页面的总高度减去向上滑动的高度,如果小于当前浏览器窗口的高度,就表面页面已经被滑动到了最低端,这个时候就可以加载更多数据。代码如下:
html代码如下:
留言
js代码如下:
//页面拉到最下方,加载更多评论
$(window).scroll(function(){
if (isLoading == true) {
if (($("body").height() - $("body").scrollTop()) <= document.documentElement.clientHeight) {
$("#loading").show();
messagePage++;
getOnePageMessage(id ,messagePage);
}
}
});
function getOnePageMessage(id, page){
var onePageMessageTmp;
var messagePageCount;
isLoading = false;
$.ajax({
url : serverPrefix + "/wbLeaveMessage/getLeaveMessage",
type : "get",
dataType: "json",
data: {
wbId: id,
messageType: 1,
page: page,
pageSize: 10
},
success : function (data) {
if (data.code == 0){
messagePageCount = data.result.pageCount;
onePageMessageTmp = data.result.leaveMessages;
if ((onePageMessageTmp.length == 0) || (messagePageCount == 1)) { // 无数据或只有一页数据,隐藏加载提示
$("#loading").hide();
}
if (onePageMessageTmp.length != 0) {
addMessage(onePageMessageTmp);
isLoading = true;
}
}
else{
onePageMessageTmp.length = 0;
$("#loading").hide();
}
}
});
}
这种方法优点是代码简单易懂,好添加。缺点是页面向上滑动时,整个页面都在向上滚动,会看不到页面顶部的内容。我做的心愿漂流瓶项目的分页加载就是使用的上面这张方法。需要注意的是,在函数“getOnePageMessage()”中,ajax需要使用异步通信模式,否则会导致刷新页面时出现误加载两页数据的情况。页面地址:心愿漂流瓶。
加载提示的效果如下图所示:
经过上网查资料,通常加载提示应在ajax通信前显示,在ajax的success()或error()中隐藏。但是在我实际调试项目的过程中,发现这样操作等页面拉到最下端时,加载提示早就隐藏了,没有起到提示用户的作用,所以我换了一种方式,加载提示一直显示,只有页面拉到最低端时,用户能够明显看到加载提示,然后会加载新的分页,加载提示被新的分页挤到屏幕外面。当所有数据加载完成时,才隐藏加载提示。
2.实现方法2
为了有更好的分页加载效果,我在网上查了一些分页加载的插件,大家推荐最多的是iscroll.js这个插件,我把这个插件加入到我做的晒照片的项目中了,页面地址:晒照片。有兴趣的童鞋可以看看,这个插件的上拉下滑已经和IOS和android的效果差不多了。
html代码如下:
加载中...
加载中...
js代码如下:
var myScroll;
var distance = 30; //滑动距离
myScroll = new IScroll('#wrapper', {
probeType: 3,
mouseWheel: true,
preventDefault: false, // 添加此语句,点击事件才有效
});
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); // 无此语句,在微信中滑动页面较卡
// 上拉滑动事件
myScroll.on("slideUp",function(){
if(this.maxScrollY - this.y > distance){
if (listMethod == 0) {
if (newestPage < newestPageCount) {
newestPage++;
getNewestPlayersInfo(newestTimestamp, tId);
addPlayer(newestList, listMethod);
myScroll.refresh(); // 刷新后,页面才能向下滑动
}
if (newestPage == newestPageCount) {
$("#newest_scroller-pullUp").hide(); // 无数据或者加载完成后,隐藏加载提示
$("#newest-loading-gif").hide();
}
}
else {
if (rankingPage < rankingPageCount) {
rankingPage++;
getRankingPlayersInfo(rankingPage, tId);
addPlayer(rankingList, listMethod);
myScroll.refresh(); // 刷新后,页面才能向下滑动
}
if (rankingPage == rankingPageCount) {
$("#ranking_scroller-pullUp").hide(); // 无数据或者加载完成后,隐藏加载提示
$("#ranking-loading-gif").hide();
}
}
}
});
这个插件的优点是滑动效果美观,和原生ios、android相似。缺点是滑动时可见div层wrapper的高度是固定的,如果页面其它部分占用空间过大,导致wrapper元素高度较小,滑动起来的用户体验就不好,这也是为什么方法一用在心愿漂流瓶的项目,而这个方法用在晒照片的项目上。
加载提示的显示隐藏和方法1相同,默认处在底部导航栏的下方,页面向上滚动时,才会显示出来,当所有数据加载完成时,才隐藏加载提示。
三.iscroll.js的bug
安卓手机上划超出屏幕回弹失效的问题(待补充)。
苹果手机上划超出屏幕回弹失效的解决办法(待补充)。
本文来源于网络:查看 >https://blog.csdn.net/yangzhen06061079/article/details/52464794
html5 加载下一页,html5上划实现分页加载相关推荐
- listview上拉加载上一页 下拉加载下一页共通处理
先什么都不说了,上效果图: 第一页默认显示: 上拉加载下一页: 拉至一定高度: 松开 加载中: 下拉加载上一页: 下拉至一定高度: 松开 加载中: 代码已经上传:http://download.csd ...
- html超出高度自动下一页,上滑web页面自动加载下一页
移动端常常是通过向上滑动到页面底部自动加载下一页内容,而不是点击"下一页"按钮进行加载.这是一个演示了自动加载下一页的小demo. html: html> 向上滑动自动加载后 ...
- android 下拉刷新数据,如何剥离Android页面下拉刷新、加载下一页等逻辑?
最近碰到一个新的页面控制需求:下拉刷新如果失败,listview上面的数据需要保留,然后悲剧的发现之前写的NetFragment和ListNetFragment都不能覆盖这种逻辑,又要重写了.痛定思痛 ...
- 滚动条触底 加载下一页数据
页面再加载 当我们使用返回数据量大的接口的时候,如果全部申请回来,就会影响项目的性能,滚动条触底再加载下一页数据能确保用户讲页面拉到页面底部的时候再去申请下一页的数据 实现原理 找到滚动条触底事件 使 ...
- 兼容IE8,滚动加载下一页
// 滚动加载下一页 var nowScrolledHeight = document.documentElement.scrollTop || document.body.scrollTop; va ...
- Android复习06【网络编程提高篇-安装GsonFormat、HttpUrlConnection封装、线程池、GsonFormat解析Json、自动加载下一页、自定义组件、页头页尾刷新、侧滑删除】
2020-04-07 星期二 [第8周] [考试不考...] 目 录 思维导图 安装GsonFormat插件 添加网络访问权限 GitHub---HttpUrlConnection封装 线程池 G ...
- Recyclerview删除数据后无法加载下一页数据(或者是漏了一条数据)
使用场景:项目中用到了"订单列表"界面,会有个删除订单的功能,点击删除之后,之前一页的10个数据会变成9个,然后加载更多就触发不了(也可能会少一条数据) 分析:触发不了是我的rec ...
- 滑动(左滑右滑加载下一页)
左滑 document.addEventListener('scroll', function (event) { //是我用的calss名 若是id可以这样写event.target.idif (e ...
- jquery手机端页面下拉刷新,上划加载更多
手机页面下拉刷新,上划加载更多,IOS不能下拉的问题解决 -转圈的是需要引用样式,代码删除了 上划加载时的样子 <script type="text/javascript"& ...
最新文章
- 《科学美国人》:美国应保持太空、网络、生物领域的科技优势
- 水很深,我还是下去了
- 王牌之作 特斯拉国产Model Y明年初下线
- 《javaScript100例|02》超级经典一套鼠标控制左右滚动图片带自动翻滚
- 注解版poi操作工具
- Git操作记录方便查阅
- 大型.NET项目的目录、编译和版本管理实践 五
- MFC dialog 间 交互[2]
- 拼多多linux版本,拼多多没有Linux版本客户端,但可用xDroid来运行拼多多APP
- Pr效果:音频过渡效果
- 如何学习计算机网络——学习方法
- php学习日志(5)-解决Windows Live Writer错误:WindowsLive.Writer.CoreServices.HttpRequestHelper的类型初始值设定发生异常...
- Windows 程序注册表常用键名——CurrentVersion
- sub 对应php什么函数,subtotal函数的使用方法1-9分别什么意思
- 如何选择适合你的兴趣爱好(四十九),现代舞
- ff新推荐的关闭办法
- 深度残差网络(ResNet)浅析
- 资讯汇总230207
- 微信防红不死码跳转微信防封源码
- 1.2医学统计学的作用