ウェブページを上にスライドさせて自動的に次のページを読み込みます.
3004 ワード
移動端はしばしば、「次のページ」ボタンをクリックしないで、ページの下部に自動的に次のページの内容を読み込みます.次のページを自動的に読み込むデモです.
html数:
住所:http://sandbox.runjs.cn/show/a3w4ayie
html数:
<!DOCTYPE html>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<meta id="viewId" name="viewport" content="width=device-width,initial-scale=1,user-scalable =no">
<html>
<head>
<link rel=stylesheet type=text/css href="demo.css">
<script src="jquery.min.js"></script>
<script src="demo.js"></script>
</head>
<body>
<div id="content" class="common-greyframe">
<a id="top"></a>
<div> </div>
</div>
</body>
</html>var page_example = {
pageNo:1,
init:function(){
for(var i = 0;i < 20;i++) {
var html = '<div class="common-items">' +
'<div class="common-usercontent">' +
' 1 ' + i +
'</div>' +
'<div class="common-previewcontent">' +
' ' + i +
' </div> ' +
' </div>';
$("#content").append(html);
}
},
loadContent:function(pageNo){
for(var i = 0;i < 20;i++) {
var html = '<div class="common-items">' +
'<div class="common-usercontent">' +
' '+pageNo+' ' + i +
'</div>' +
'<div class="common-previewcontent">' +
' ' + i +
' </div> ' +
' </div>';
$("#content").append(html);
}
}
}
$(function(){
page_example.init();
$(window).scroll(function(){
var mybody = document.body;
//FF document.documentElement.scrollTop，chrome document.body.scrollTop
if(mybody.scrollHeight-mybody.clientHeight <= (mybody.scrollTop | document.documentElement.scrollTop)+5){
console.log(' ');
page_example.pageNo++;
page_example.loadContent( page_example.pageNo)
}
});
});html,body{
height:100%;
}
.common-greyframe{
background: #f0f0f0;
padding: 0.5em;
}
.common-items{
border: 0.1em solid #8c8b8a;
border-radius: 0.3em;
background: #FFFFFF;
margin: 0.5em;
}
.common-usercontent{
font: 0.8em sans-serif;
color:#000000;
padding: 0.5em 0.5em 0 0.5em;
}
.common-school,.common-previewcontent{
font: 0.6em "sans-serif";
color:#c4c4c4;
padding: 0.2em 0.5em 0.5em 0.5em;
}住所:http://sandbox.runjs.cn/show/a3w4ayie