1. 程式人生 > >手機H5頁面,滑動到底部自動加載下一頁內容

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

列表 瀏覽器 運行 on() 元素 cnblogs 下場 指定 解決方案

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

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

當用戶滾動指定的元素時,會發生 scroll 事件。

scroll 事件適用於所有可滾動的元素和 window 對象(瀏覽器窗口)。

scroll() 方法觸發 scroll 事件,或規定當發生 scroll 事件時運行的函數。

代碼如下:

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

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