携帯電話でWebページを閲覧するときは、機能がよく使用されます。 JDまたはTaobaoを閲覧すると、ページが下部にスライドし、データがリストに自動的にロードされていることがわかります。これらの関数が以前にどのように実装されたかわからなかったので、PCブラウザーにそのような機能をシミュレートして実装しました。閲覧効果を見てみましょう。
スクロールバーがページの下部にスクロールすると、プロンプト「ロード...」が表示されます。
ページにすべてのデータがロードされている場合、ページの下部にスクロールすると、「データが終了しました」とプロンプトします。
無限のデータ読み込みを実装するプロセスは、ほぼ次のとおりです。
1.ページの下部にバーをスクロールします。
2. Ajaxのロードをトリガーして、リストにリクエストによって返されたデータをロードします。
スクロールバーがページの下部にスクロールするかどうかを見分ける方法は？ルールを設定できます。スクロールバーのスクロールの高さがドキュメント全体の高さとは異なる20ピクセル未満の場合、スクロールバーがページの下部にスクロールされていると考えられています。
ドキュメントの高さ - ビューポートの高さ - スクロールバースクロールの高さ<20
コードを通じてそのような判断を達成するには、上記の高さがどのコードが得られるかを理解する必要がありますか？以前に書いた記事を参照することができます。「HTML要素座標位置決め、これらの知識ポイントを習得する必要があります。」
上記の判断では、方法をカプセル化しました。
// Scrollbarがページの下部にスクロールするかどうかを検出するかどうかisscrolltopagebottom（）{// document height var documentheight = document.documentelement.offseeth; var viewtheight = getViewPortSize（）。H; var scrollheight = window.pageyoffset || document.documentlement.scrolltop || document.body.scrolltop || 0; documentheight -viewtheight -scrollheight <20; }判断を下したら、タイマーをオンにして、900ミリ秒で1回監視できます。 ISSCROLLTOPAGEBOTTOM（）がtrueを返す場合、Ajaxに電話してデータを要求します。 Falseが返されると、監視する前に900ミリ秒を通過します。
以下はコアコードの実装です。
<！Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> infinite pagination </title> <link rel = "styleSheet" href = "assets/css/index.css"/>> </head> <body> <ul id = < src = "// cdn.bootcss.com/jquery/3.1.0/jquery.min.js"> </script> <script src =" js/jquery.mockjax.js "> </script> <script type =" text/javascript "src =" js/jvasprict =>> <オブジェクトのwとhのプロパティ、ビューポート関数のサイズを返しますgetViewportsize（w）{//指定されたウィンドウを使用します。パラメーターがない場合は、現在のウィンドウw = w ||を使用しますウィンドウ; // IE8以前のバージョンを除き、他のブラウザはif（w.innerwidth！= null）return {w：w.innerwidth、h：w.innerheight}を使用することができます。 //標準モードのIE（または任意のブラウザ）の場合var d = w.document; if（document.compatmode == "css1compat"）return {w：d.documentelement.clientwidth、h：d.documentelement.clientheight}; //奇妙なモードでブラウザに戻る{W：D.Body.ClientWidth、H：D.Body.ClientHeight}; } // Scrollbarがページの下部にスクロールするかどうかを検出するかどうかisscrolltopagebottom（）{// document height height var documentheight = document.documentelement.offseTheight; var viewtheight = getViewPortSize（）。H; var scrollheight = window.pageyoffset || document.documentlement.scrolltop || document.body.scrolltop || 0; documentheight -viewtheight -scrollheight <20; } //製品テンプレート関数getGoodStemPlate（good）{return "<li>" + "<div class = 'pic-wrap leftfloat'>" + "<img src = '" + goods.pic + "'>" + "</div>" + "<div class = 'info-wrap leftfloat' + "</span> </div>" + "<div class = 'info-address'> <span>" + goods.address + "</span> </div>" + "<div class = 'info-bottom'>" <div class = 'info-float'> <span> " + goods.price +" Goods.star + "推奨</span> </div>" + "<div class = 'info-more leftfloat'> <span>詳細情報</span> </div>" + "</div>" + "</div>" + "</li>"; } //初期化中にリストに100個のデータを直接ロードする$ .AJAX（ "http：// localhost：8800/loaddata？sessionid =" +（ + new date））。 $（ "＃list"）。append（html）}）; //データ関数loaddatadynamic（）{//最初にif（$（ "＃loadingli"）。length === 0）$（ "＃list"）。 else {$（ "＃loadingli"）。text（ "loading ..."）。removeclass（ "space"）; } var loadingli = document.getElementById（ "Loadingli"）; loadingli.scrollintoview（）; //データの読み込みデータが読み込まれた後、ロードプロンプトVAR HasData = false、MSG = ""を削除する必要があります。 $ .ajax（ "http：// localhost：8800/loaddata？sessionid =" +（ + new date））。done（function（result）{if（result.data.length> 0）{hasdata = true; var html = "" getGoodStemPlate（goods）; $（html）; $（document.body.body.scrolltop -40）、500）; } // Scrollbarがページの下部にスクロールする場合、新しいデータを読み込む必要があり、ロードプロンプトが表示されますfunction watchscroll（）{if（！isscrolltopagebottom（））{settimeout（arguments.callee、900）;戻る; } loaddatadynamic（）; } // Scrollbar WatchScroll（）; </script> </body> </html>を検出し始めますデモのjquery-mockjaxを介してシミュレートしたデータ。コードは次のとおりです。
/***シミュレーションインターフェイス。 */var i = 0、len = 200、addresses = ["sichuan"、 "beijing"、 "shanghai"、 "grangzhou"、 "shenzhen"、 "gansu"、 "Yunnan"、 "Zhejiang"、 "qinghai"、 "guizhou"]; var = 50、math.min（bar size "、bar size（bir size（bir size）、 []; for（; i <size; i ++）{arr.push（{name： "apple" +（i％10 + 1）、pic： "assets/images/iphone" +（i％10 + 1） + ".jpg"、priceint：parseint（math.random（） * 10000）、star：parseint（math.random（）returntes [opresdes] arr;} $。mockjax（{url： 'http：// localhost：8800/loaddata*'、responsetime：1000、response：function（settings）{this.responsetext = {this.responsetext = {this.ster、data：getData（）}}}}）;Githubにアップロードした完全なデモ全体：
https://github.com/heavis/pageloader
オンラインデモ：
https://heavis.github.io/pageloader/index.html
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。