手機H5頁面，滑動到底部自動載入下一頁內容

標籤：底部   doc   方案   scroll   解決   項目   bsp   style   function   

做公眾號項目中有如下情境，一個H5頁面有列表資料，不考慮一次載入所有資料，故需要分頁操作，解決方案為滑動到底部自動載入下一頁內容。直接在H5的js當中實現。

主要使用jquery的scroll()方法：

當使用者滾動指定的元素時，會發生 scroll 事件。

scroll 事件適用於所有可滾動的元素和 window 對象（瀏覽器視窗）。

scroll() 方法觸發 scroll 事件，或規定當發生 scroll 事件時啟動並執行函數。

代碼如下：

$(window).scroll(function(){
　　//判斷是否滑動到頁面底部     if($(window).scrollTop()== $(document).height() - $(window).height()){           // TODO 滑動到底部時可請求下一頁的資料並載入，載入可使用append方法     }});

 

手機H5頁面，滑動到底部自動載入下一頁內容