jquery+ajax實現下拉刷新+上拉加載

時間 2020-05-20

標籤 jquery+ajax jquery ajax 實現下拉刷新加載欄目 JQuery 简体版

原文原文鏈接

上面動圖是實現的效果。javascript

全程無需從新加載整個頁面，只須要上下拉便可刷新數據！css

index.htmlhtml

<!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.jsonjava

[
  {
    "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" } ]