HTML5-pull-up-to-load-more

  • Build standard page
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pull up</title>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<script>
! function() {
var e = "@charset \"utf-8\";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}",
d = document.createElement("style");
if (document.getElementsByTagName("head")[0].appendChild(d), d.styleSheet) {
d.styleSheet.disabled || (d.styleSheet.cssText = e)
} else {
try {
d.innerHTML = e
} catch (f) {
d.innerText = e
}
}
}();
</script>
<script>
! function(N, M) {
function L() {
var a = I.getBoundingClientRect().width;
a / F > 540 && (a = 540 * F);
var d = a / 10;
I.style.fontSize = d + "px", D.rem = N.rem = d
}
var K, J = N.document,
I = J.documentElement,
H = J.querySelector('meta[name="viewport"]'),
G = J.querySelector('meta[name="flexible"]'),
F = 0,
E = 0,
D = M.flexible || (M.flexible = {});
if (H) {
console.warn("将根据已有的meta标签来设置缩放比例");
var C = H.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
C && (E = parseFloat(C[1]), F = parseInt(1 / E))
} else {
if (G) {
var B = G.getAttribute("content");
if (B) {
var A = B.match(/initial\-dpr=([\d\.]+)/),
z = B.match(/maximum\-dpr=([\d\.]+)/);
A && (F = parseFloat(A[1]), E = parseFloat((1 / F).toFixed(2))), z && (F = parseFloat(z[1]), E = parseFloat((1 / F).toFixed(2)))
}
}
}
if (!F && !E) {
var y = N.navigator.userAgent,
x = (!!y.match(/android/gi), !!y.match(/iphone/gi)),
w = x && !!y.match(/OS 9_3/),
v = N.devicePixelRatio;
F = x && !w ? v >= 3 && (!F || F >= 3) ? 3 : v >= 2 && (!F || F >= 2) ? 2 : 1 : 1, E = 1 / F
}
if (I.setAttribute("data-dpr", F), !H) {
if (H = J.createElement("meta"), H.setAttribute("name", "viewport"), H.setAttribute("content", "initial-scale=" + E + ", maximum-scale=" + E + ", minimum-scale=" + E + ", user-scalable=no"), I.firstElementChild) {
I.firstElementChild.appendChild(H)
} else {
var u = J.createElement("div");
u.appendChild(H), J.write(u.innerHTML)
}
}
N.addEventListener("resize", function() {
clearTimeout(K), K = setTimeout(L, 300)
}, !1), N.addEventListener("pageshow", function(b) {
b.persisted && (clearTimeout(K), K = setTimeout(L, 300))
}, !1), "complete" === J.readyState ? J.body.style.fontSize = 12 * F + "px" : J.addEventListener("DOMContentLoaded", function() {
J.body.style.fontSize = 12 * F + "px"
}, !1), L(), D.dpr = N.dpr = F, D.refreshRem = L, D.rem2px = function(d) {
var c = parseFloat(d) * this.rem;
return "string" == typeof d && d.match(/rem$/) && (c += "px"), c
}, D.px2rem = function(d) {
var c = parseFloat(d) / this.rem;
return "string" == typeof d && d.match(/px$/) && (c += "rem"), c
}
}(window, window.lib || (window.lib = {}));
</script>
</head>
<body>
<div class="app"></div>
<div class="app-load"><div class="loading"></div>加载中...</div>
<div class="app-down" style="display: none">
<div class="app-noData">没有更多了</div>
</div>
</body>
</html>
  • Start by rolling to the bottom , Get page dependency jQuery zepto 20px guarantee
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
$(function () {
if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {
//如果是苹果设备,因到底部回弹,控制在20px像素范围内实现回调
$(window).scroll(function (event) {
var scrollTop = $(window).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(window).height();
if (scrollHeight - windowHeight - scrollTop <= 20) {
$('.app-load').show();//加载中div显示
$('.app-down').hide();//没有更多了div隐藏
beginIndex += 4;
sendAjax("baidu.com?date=1", "beginIndex=" + beginIndex + "&num=4",
function (data) {
loadData(data);
});
}
});
} else {
//如果是其他设备,直接到底部触发回调
$(window).scroll(function (event) {
var scrollTop = $(window).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(window).height();
if (scrollHeight - windowHeight == scrollTop) {
$('.app-load').show();//加载中div显示
$('.app-down').hide();//没有更多了div隐藏
beginIndex += 4;
sendAjax("baidu.com?date=1", "beginIndex=" + beginIndex + "&num=4",
function (data) {
loadData(data);
});
}
});
}
});
  • Div local scroll to bottom loading data
1
2
3
4
5
6
7
8
9
$(function(){
let div = $('.box');
let clientHeight = div.clientHeight;
let scrollTop = div.scrollTop;
let scrollHeight = div.scrollHeight;
if(scrollHeight - clientHeight <= scrollTop){
loadData(data);
}
})
  • How to load common function network pro?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
// 判断变量是否为空
function isEmpty(obj) {
if (obj == undefined || obj == null || obj=="null" || obj == "" ) {
return true;
}
return false;
}
// 判断变量是否非空
function isNotEmpty(obj) {
if (obj == undefined || obj == null || obj=="null" || obj == "" ) {
return false;
}
return true;
}
//对字符串排空处理
function trim(obj){
if(isEmpty(obj)){
return "";
}else{
return obj;
}
}
// url获取查询参数
function getstring(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null)
return unescape(r[2]);
return null;
}
/**
* ajax封装
* uri 发送请求的相对地址
* data 发送到服务器的数据
* successfn 成功回调函数
* errorfn 失败回调函数
*/
function sendAjaxs(uri, data, successfn, errorfn) {
var url=apiBaseUrl+uri+"?reqType=1";
data=(data==null||typeof(data)=="undefined")?"":data;
$.ajax({
type : "post",
contentType: "application/x-www-form-urlencoded; charset=utf-8",
data : data,
url : url,
dataType : "json",
success : function(data) {
if(data.code==0){
successfn(data);
}else if(data.code==-1){
//当code=-1时说明是未登录状态,直接跳转登录页面
window.location.href = data.loginUrl+window.location.href;
}else{
console.log("ajax request error,error code:" + data.code);
if(errorfn!=null){
errorfn(null);
}
}
},
error : function(e) {
console.log("ajax request error,error desc:" + e);
if(errorfn!=null){
errorfn(e);
}
}
});
};
//不执行异常回调
function sendAjax(uri, data, successfn) {
sendAjaxs(uri,data,successfn,null);
};