js滑动到底部加载更多
版權聲明：本文為博主原創文章，轉載請附上原鏈接。 https://blog.csdn.net/weixin_39927850/article/details/80502315
?
?
上面動圖是實現的效果。
全程無需重新加載整個頁面，只需要上下拉即可刷新數據！
index.html
?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上拉加載</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
?
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
html {font-size: 14px; }
header {
height: 40px;
width: 100%;
min-width: 320px;
background: #000;
text-align: center;
color: #fff;
font-size: 1.2rem;
line-height: 40px;
}
footer {
height: 52px;
width: 100%;
min-width: 320px;
background: #000;
text-align: center;
color: #fff;
font-size: 1.2rem;
line-height: 52px;
position: absolute;
bottom: 0;
}
#wrapper {
width: 100%;
min-width: 320px;
position: absolute;
left: 0;
top: 40px;
bottom: 52px;
overflow: hidden;
z-index: 1;
background-color: #eee;
?
/* 防止本機Windows上的觸摸事件 */
-ms-touch-action: none;
?
/* 防止callout tap-hold和文本的選擇 */
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
?
/* 防止文本調整取向變化對web應用程序很有用 */
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
.pull-loading {
text-align: center;
height: 40px;
line-height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
#scroller ul li {
padding: 20px 10px;
border-bottom: solid 1px #ccc;
background: #fff;
}
</style>
?
</head>
<body>
<header>上拉加載，下拉刷新</header>
<div id="wrapper">
<div id="scroller">
<ul>
<li>這里顯示部分數據</li>
<li>這里顯示部分數據</li>
<li>這里顯示部分數據</li>
<li>這里顯示部分數據</li>
<li>這里顯示部分數據</li>
</ul>
<div class="pull-loading">
上拉加載
</div>
</div>
</div>
<footer>底部</footer>
?
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript">
var myscroll = new iScroll("wrapper", {
onScrollMove: function () { //拉動時
//上拉加載
if (this.y < this.maxScrollY) {
$(".pull-loading").html("釋放加載");
$(".pull-loading").addClass("loading");
} else {
$(".pull-loading").html("上拉加載");
$(".pull-loading").removeClass("loading");
}
},
onScrollEnd: function () { //拉動結束時
//上拉加載
if ($(".pull-loading").hasClass('loading')) {
$(".pull-loading").html("加載中...");
pullOnLoad();
}
}
});
?
//上拉加載函數,ajax
var num = 0;
var page = 4; //每次加載4條
function pullOnLoad() {
setTimeout(function () {
$.ajax({
url: "json/data.json",
type: "get",
dataType: 'json',
success: function (data) {
var data_length = data.length;//數據的總長度
var remainder = data_length % page;//余數
if ( data_length >= (num+page)){
for (var j = num; j < num + page; j++){
var text = data[j].text;
$("#scroller ul").append("<li>"+ text +"</li>");
}
num+=page;
}else if (remainder != 0 && data_length-num == remainder){
for (var j = num; j < num + remainder; j++){
var text = data[j].text;
$("#scroller ul").append("<li>"+ text +"</li>");
}
num+=page;
}else{
$('.pull-loading').html("沒有了喲");
}
myscroll.refresh();
},
error: function () {
console.log("出錯了");
}
});
myscroll.refresh();
}, 500);
}
</script>
?
</body>
</html>
data.json
{
"text":"十年編程兩茫茫，工期短，需求長。",
"date":"2018-02-02 14:00"
},
{
"text":"千行代碼，Bug何處藏。",
"date":"2018-02-02 14:00"
},
{
"text":"縱使上線又如何，新版本，繼續忙。",
"date":"2018-02-02 14:00"
},
{
"text":"黑白顛倒沒商量，睡地鋪，吃食堂。",
"date":"2018-02-02 14:00"
},
{
"text":"夜半夢醒，無人在身旁。",
"date":"2018-02-02 14:00"
},
{
"text":"最怕燈火闌珊時，手機響，心里慌。",
"date":"2018-02-02 14:00"
},
{
"text":"是，程序員設計了程序",
"date":"2018-02-02 14:00"
},
{
"text":"還是，程序造就了程序員？",
"date":"2018-02-02 14:00"
},
{
"text":"程序，程序員——你的名字，我的姓氏",
"date":"2018-02-02 14:00"
},
{
"text":"日擼代碼三千行，瘋狂、瘋狂，人未老，珠已黃。",
"date":"2018-02-02 14:00"
},
{
"text":"少年投身IT行，老來無伴又何妨。擦肩美女不屑看，三千碼友在身旁。",
"date":"2018-02-02 14:00"
},
{
"text":"老夫聊發少年狂，不小心，選錯行。誤入IT，兩眼淚茫茫",
"date":"2018-02-02 14:00"
},
{
"text":"夜半話凄涼，轉眼淚千行，日日工期緊，亦為重構忙。久易無定論，命懸需求方，四顧前途路，一步三踉蹌。",
"date":"2018-02-02 14:00"
},
{
"text":"IT放兩旁，閑來把碼敲，余音仍繞梁。碼農壓力大，愿君更健康！",
"date":"2018-02-02 14:00"
},
{
"text":"111111111111",
"date":"2018-02-02 14:00"
},
{
"text":"22222",
"date":"2018-02-02 14:00"
},
{
"text":"33333",
"date":"2018-02-02 14:00"
},
{
"text":"4444",
"date":"2018-02-02 14:00"
},
{
"text":"55555",
"date":"2018-02-02 14:00"
},
{
"text":"66666",
"date":"2018-02-02 14:00"
},
{
"text":"7777",
"date":"2018-02-02 14:00"
},
{
"text":"88888",
"date":"2018-02-02 14:00"
},
{
"text":"99999",
"date":"2018-02-02 14:00"
},
{
"text":"1010101010",
"date":"2018-02-02 14:00"
},
{
"text":"1.1.1.1.1.1.1.1.1.1.",
"date":"2018-02-02 14:00"
},
{
"text":"12121212121212",
"date":"2018-02-02 14:00"
},
{
"text":"1131313133131",
"date":"2018-02-02 14:00"
},
{
"text":"1414141414",
"date":"2018-02-02 14:00"
},
{
"text":"1515151515151",
"date":"2018-02-02 14:00"
},
{
"text":"111111111111",
"date":"2018-02-02 14:00"
},
{
"text":"111111111111",
"date":"2018-02-02 14:00"
},
{
"text":"111111111111",
"date":"2018-02-02 14:00"
},
{
"text":"111111111111",
"date":"2018-02-02 14:00"
},
{
"text":"111111111111",
"date":"2018-02-02 14:00"
},
{
"text":"111111111111",
"date":"2018-02-02 14:00"
},
{
"text":"111111111111",
"date":"2018-02-02 14:00"
}
]
需要引入兩個js文件
jquery-2.2.4.min.js
iscroll.js
這兩個文件已經準備好了
https://pan.baidu.com/s/1dGSTBHPUtvBKi41IcxRogw
總結
以上是生活随笔為你收集整理的js滑动到底部加载更多的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 王者荣耀的赏金联赛在哪(如何玩好《王者荣
- 下一篇： iframe嵌套改变url地址