移动端web页面上滑加载更多功能
背景介绍：
开发企业微信的一个应用，实现在企业微信中调用自己程序页面，页面加载多模块数据，向下滑加载更多，等等等等，一波三折
然后很早就成功了是这样实现的：
html:
<div id="main-info">
<div class="listclean-header">
<label class="fontsize15 fontcolor333 ">
分店：</label>
<div id="selectbox" class="brancnlist">
</div>
</div>
<div class="listclean-body">
<ul id="cleanlist">
</ul>
</div>
<div class="listclean-footer">
<ul>
<li class="clean" value="">待打扫 </li>
<li class="clean" value="">已打扫 </li>
</ul>
</div>
</div>
js：异步获取数据
ajaxdata: function (_branchid, _pageindex, _status) {//页面数据加载
var _this = this;
$.ajax({
url: "AjaxListClean",
type: "post",
data: { BranchID: _branchid, PageIndex: _pageindex, Status: _status },
aysnc: false,
success: function (res) {
$(".load-mask").hide();
$(".listclean-body").css("position", "static");
$("#PageIndex").val(res.PageIndex);
var _html = "";
for (var i = ; i < res.ListCleaning.length; i++) {
_html += "<li class=\"position-relative clean_" + res.ListCleaning[i].Status + "\" data-myid=\"" + res.ListCleaning[i].ID + "\">"
_html += " <p class=\"branch-name\">" + res.ListCleaning[i].Branch.Name + "</p>";
_html += "<p class=\"room-number\">" + res.ListCleaning[i].Room.Name + "</p>";
_html += "<p class=\"fontsize15\">" + res.ListCleaning[i].StatusString + "</p>";
_html += "<dl><dd>" + res.ListCleaning[i].TypeIDString[] + "</dd></dl></li>";
}
$("#cleanlist").append(_html);
$("#IsMore").val(res.IsMore);
$("#PageIndex").val(res.PageIndex);
$("#Status").val(res.Status);
$("#BranchID").val(res.BranchID);
if (res.PageIndex == "") {
_this.branchselectinit(res.ListBranch); //分店选择
}
listclean.goconfirm();
}
});
}
页面滚动的效果
getScrollTop: function () {//获取滚动条当前的位置
var scrollTop = ;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
}
else if (document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
},
getClientHeight: function () {//获取当前可是范围的高度
var clientHeight = ;
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
}
else {
clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
}
return clientHeight;
},
getScrollHeight: function () {//获取文档完整的高度
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}
window.onscroll = function () {
var _ismore = $("#IsMore").val();
if (_ismore == "") {//判断是否有更多数据
return false;
}
//页面中有一个头和一个底，然后前端姐姐告诉我
//第一次加载要加一个67px,才可以
var _pageindex = $("#PageIndex").val();
var _heightconfig = ;
if (_pageindex == "") {
_heightconfig = ;
} else {
_heightconfig = ;
}
if (listclean.getScrollTop() + listclean.getClientHeight() + _heightconfig == listclean.getScrollHeight()) {
$(".load-mask").show();//“更多”标志
$(".listclean-body").css("position", "fixed");
var _status = $("#Status").val();
var _branchid = $("#BranchID").val();
var _pageindex = $("#PageIndex").val();
//应该有一个效果
listclean.ajaxdata(_branchid, _pageindex, _status);
}
}
效果图：
然后第二个星期来了就不能用了，前端姐姐告诉我，她实现了一个右滑加载出半个页面展示个人信息！
这时候页面滚动监听时间就失效了
网上找原因：
1：html,body{height:100%;} 设置了100%的
2：position 和overflow 的问题；
解决方案:去掉height:100%,没啥用；
去掉了页面中最外部的div 的 postion:fixed；然后就好了！
但是，以前的计算方式是错误的，不能兼用不同手机设备！
改了一种算法：
js:
window.onscroll = function () {
var clientHeight = document.documentElement.scrollTop === ? document.body.clientHeight : document.documentElement.clientHeight;
var scrollTop = document.documentElement.scrollTop === ? document.body.scrollTop : document.documentElement.scrollTop;
var scrollHeight = document.documentElement.scrollTop === ? document.body.scrollHeight : document.documentElement.scrollHeight;
if (clientHeight + scrollTop === scrollHeight) {//判断是否要去加载数据
$(".load-mask").show();
$(".listclean-body").css("position", "fixed");
var _status = $("#Status").val();
var _branchid = $("#BranchID").val();
var _pageindex = $("#PageIndex").val();
listclean.ajaxdata(_branchid, _pageindex, _status);
}
}
惊喜的发现，这是实现了类似于微信的数据加载，就是滑动到最上面加载更多数据，记下来吧，以后可能用到！
中间还去找了一个插件，可移植性比较差！
解决方案：修改js算法
js:
window.onscroll = function () {
var _ismore = $("#IsMore").val();//是否有更多数据
if (_ismore == "") {
return false;
}
var doc = document;
var win = window;
//滚动到底部距离
$ScrollBottom = $(doc).height() - $(win).height() - $(win).scrollTop();
if ($ScrollBottom == ) {
$(".load-mask").show();//更多标志
var _status = $("#Status").val();
var _branchid = $("#BranchID").val();
var _pageindex = $("#PageIndex").val();
//加载数据
listclean.ajaxdata(_branchid, _pageindex, _status);
}
}
这里去掉了$(".listclean-body").css("position", "fixed");这行代码，因为它会导致每次加载数据之后，页面自动滚动到最顶部！
//listclean-body数据主体的div
完美实现！
最后附上加载更多标志实现方式：
html+css:
<div class="load-mask">
<div class="load-bc">
<div class="load">
</div>
</div>
@charset "utf-8";
/* CSS Document */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin:;
padding:;
border:;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height:;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing:;
}
body {
font-family: 'Lato', sans-serif; } .load-bc{width:80px;height:80px;border-radius:4px;background:Rgba(0,0,0,.8);position:absolute;top:40%;left:50%;margin-left:-40px;z-index:}
.load-mask{width:100%;height:100%;position:fixed;top:;left:;z-index:} .load{
margin: 35px auto;
font-size: 25px;
width: 10px;
height: 10px;
border-radius: 50%;
position: relative;
text-indent: -9999em;
-webkit-animation: load5 1.1s infinite ease;
animation: load5 1.1s infinite ease; }
@keyframes load5{
0%{
box-shadow: 0 -20px 0 0 #ffffff, 14px -14px 0 0 rgba(255, 255, 255, 0.2), 20px 0 0 0 rgba(255, 255, 255, 0.2), 14px 14px 0 0 rgba(255, 255, 255, 0.2), 0 20px 0 0 rgba(255, 255, 255, 0.2), -14px 14px 0 0 rgba(255, 255, 255, 0.2), -20px 0 0 0 rgba(255, 255, 255, 0.5), -14px -14px 0 0 rgba(255, 255, 255, 0.7);
}
12.5%{
box-shadow: 0 -20px 0 0 rgba(255, 255, 255, 0.7), 14px -14px 0 0 rgba(255, 255, 255, 1), 20px 0 0 0 rgba(255, 255, 255, 0.2), 14px 14px 0 0 rgba(255, 255, 255, 0.2), 0 20px 0 0 rgba(255, 255, 255, 0.2), -14px 14px 0 0 rgba(255, 255, 255, 0.2), -20px 0 0 0 rgba(255, 255, 255, 0.2), -14px -14px 0 0 rgba(255, 255, 255, 0.5);
}
25%{
box-shadow: 0 -20px 0 0 rgba(255, 255, 255, 0.5), 14px -14px 0 0 rgba(255, 255, 255, 0.7), 20px 0 0 0 rgba(255, 255, 255, 0.2), 14px 14px 0 0 rgba(255, 255, 255, 0.2), 0 20px 0 0 rgba(255, 255, 255, 0.2), -14px 14px 0 0 rgba(255, 255, 255, 0.2), -20px 0 0 0 rgba(255, 255, 255, 0.2), -14px -14px 0 0 rgba(255, 255, 255, 0.2);
}
37.5%{
box-shadow: 0 -20px 0 0 rgba(255, 255, 255, 0.2), 14px -14px 0 0 rgba(255, 255, 255, 0.5), 20px 0 0 0 rgba(255, 255, 255, 0.7), 14px 14px 0 0 rgba(255, 255, 255, 1), 0 20px 0 0 rgba(255, 255, 255, 0.2), -14px 14px 0 0 rgba(255, 255, 255, 0.2), -20px 0 0 0 rgba(255, 255, 255, 0.2), -14px -14px 0 0 rgba(255, 255, 255, 0.2);
}
50%{
box-shadow: 0 -20px 0 0 rgba(255, 255, 255, 0.2), 14px -14px 0 0 rgba(255, 255, 255, 0.2), 20px 0 0 0 rgba(255, 255, 255, 0.5), 14px 14px 0 0 rgba(255, 255, 255, 0.7), 0 20px 0 0 rgba(255, 255, 255, 1), -14px 14px 0 0 rgba(255, 255, 255, 0.2), -20px 0 0 0 rgba(255, 255, 255, 0.2), -14px -14px 0 0 rgba(255, 255, 255, 0.2);
}
62.5%{
box-shadow: 0 -20px 0 0 rgba(255, 255, 255, 0.2), 14px -14px 0 0 rgba(255, 255, 255, 0.2), 20px 0 0 0 rgba(255, 255, 255, 0.2), 14px 14px 0 0 rgba(255, 255, 255, 0.5), 0 20px 0 0 rgba(255, 255, 255, 0.7), -14px 14px 0 0 rgba(255, 255, 255, 1), -20px 0 0 0 rgba(255, 255, 255, 0.2), -14px -14px 0 0 rgba(255, 255, 255, 0.2);
}
75%{
box-shadow: 0 -20px 0 0 rgba(255, 255, 255, 0.2), 14px -14px 0 0 rgba(255, 255, 255, 0.2), 20px 0 0 0 rgba(255, 255, 255, 0.2), 14px 14px 0 0 rgba(255, 255, 255, 0.2), 0 20px 0 0 rgba(255, 255, 255, 0.5), -14px 14px 0 0 rgba(255, 255, 255, 0.7), -20px 0 0 0 rgba(255, 255, 255, 1), -14px -14px 0 0 rgba(255, 255, 255, 0.2);
}
87.5%{
box-shadow: 0 -20px 0 0 rgba(255, 255, 255, 0.2), 14px -14px 0 0 rgba(255, 255, 255, 0.2), 20px 0 0 0 rgba(255, 255, 255, 0.2), 14px 14px 0 0 rgba(255, 255, 255, 0.2), 0 20px 0 0 rgba(255, 255, 255, 0.2), -14px 14px 0 0 rgba(255, 255, 255, 0.5), -20px 0 0 0 rgba(255, 255, 255, 0.7), -14px -14px 0 0 rgba(255, 255, 255, 1);
}
100%{
box-shadow: 0 -20px 0 0 #ffffff, 14px -14px 0 0 rgba(255, 255, 255, 0.2), 20px 0 0 0 rgba(255, 255, 255, 0.2), 14px 14px 0 0 rgba(255, 255, 255, 0.2), 0 20px 0 0 rgba(255, 255, 255, 0.2), -14px 14px 0 0 rgba(255, 255, 255, 0.2), -20px 0 0 0 rgba(255, 255, 255, 0.5), -14px -14px 0 0 rgba(255, 255, 255, 0.7);
} }
移动端web页面上滑加载更多功能的更多相关文章
- vue 上滑加载更多
移动端网页的上滑加载更多,其实就是滑动+分页的实现. <template> <div> <p class="footer-text">--{{f ...
- Android如何定制一个下拉刷新，上滑加载更多的容器
前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...
- Android 上拉加载更多功能
前几天看了github上面的例子,参照它的实现,自己又稍微改了一点,往项目里面增加了一个上拉加载更多功能.具体的实现如下: 首先要重写ListView: import android.content. ...
- 移动端touch事件 || 上拉加载更多
前言: 说多了都是泪,在进行项目开发时,在上拉加载更多实现分页效果的问题上,由于当时开发任务紧急,所以就百度找了各种移动端的上拉下拉 实现加载更多的插件.然后就留下了个坑:上拉加载的时候会由于用户错误 ...
- h5 实现页面上拉加载更多数据
您好,您的上拉加载更多的代码来喽: html:(style部分:html部分:js部分--js部分主要就是监控上拉,调接口) //上拉加载更多css <style> .wait-loadi ...
- Android 开发 上拉加载更多功能实现
实现思维 开始之前先废话几句,Android系统没有提供上拉加载的控件,只提供了下拉刷新的SwipeRefreshLayout控件.这个控件我们就不废话,无法实现上拉刷新的功能.现在我们说说上拉加载更 ...
- Android的ListView分页功能(上滑加载更多)
今天主要工作是将之前实现的各种ListView显示全部信息,优化成了每次加载几条数据,然后上滑的时候加载更多,底部显示一个进度条和一个文字提示,然后加载完毕后,将提示信息隐藏. 一边看教学视频一遍敲代 ...
- 使用jquery.more.js上滑加载更多
html: <div id="more"> <div class="single_item"> <div class=" ...
- Flutter移动电商实战 --（20）首页上拉加载更多功能的制作
这节课学习一下上拉加载效果,其实现在上拉加载的插件有很多,但是还没有一个插件可以说完全一枝独秀,我也找了一个插件,这个插件的优点就是服务比较好,作者能及时回答大家的问题.我觉的选插件也是选人,人对了, ...
随机推荐
- Linux-HUP信号的干扰问题
在向大家详细介绍Linux HUP信号之前,首先让大家了解下Linux HUP信号,然后全面介绍Linux服务器X,希望对大家有用.想让进程在断开连接后依然保持运行?如果该进程已经开始运行了该如何补救 ...
- epoll反应堆模型
================================ 下面代码实现的思想:epoll反应堆模型:( libevent 网络编程开源库 核心思想) 1. 普通多路IO转接服务器: 红黑树 ― ...
- AsyncTask的原理和缺点
番外tips: 特别喜欢一句话.假设你想了解一个人.那你从他出生開始了解吧.相同的道理,想要了解AsyncTask,就从它的源代码開始吧. 进入主题前,在说一下,开发中已经非常少使用AsyncTask ...
- 什么是SQL注入式攻击？
什么是SQL注入式攻击? 所谓SQL注入式攻击,就是攻击者把SQL命令插入到Web表单的输入域或页面请求的查询字符串,欺骗服务器执行恶意的SQL命令.在某些表单中,用户输入的内容直接用来构造(或者影响 ...
- unity5, UGUI刺穿问题解法
我希望在touch屏幕时player起跳,于是在playerControl.cs的Update函数中添加如下touch代码: if (Input.GetMouseButtonDown (0)) {/ ...
- php 36进制与10进制转换
php 36进制与10进制转换 /** * @desc im:十进制数转换成三十六机制数 * @param (int)$num 十进制数 * return 返回:三十六进制数 */ function ...
- KVC之-(id)valueForKey:(NSString *)key的实现原理与验证
KVC之-(id)valueForKey:(NSString *)key的实现原理与验证 2.-(id)valueForKey:(NSString *)key的实现原理与验证; #功能:使用一个字符串 ...
- 李洪强iOS开发之iOS工具收集
李洪强iOS开发之iOS工具收集 项目 简述 日期 我是怎么慢慢变懒的 : Jenkins + 蒲公英 使用Jenkins + 蒲公英使得项目打包给测试人员自动化,大大节省了劳动力 2015.04.1 ...
- linux学习笔记7---命令cp
cp命令用来复制文件或者目录,是Linux系统中最常用的命令之一. cp命令用来将一个或多个源文件或者目录复制到指定的目的文件或目录.它可以将单个源文件复制成一个指定文件名的具体的文件或一个已经存在的 ...
- a5调试
1 generating rsa key...[ 4.452000] mmc0: error -110 whilst initialising SD card[ 5.602000] mmc ...