滑輪滾動到頁面底部ajax載入資料配合json實現

2021-07-02 17:15:32 字數 961 閱讀 5477

滾動下拉到頁面底部載入資料是很多瀑布流**的做法,那來看看配合jsonp是如何實現的吧,小菜總結記錄之用,高手勿噴。

當然本例子採用的是jquery庫,後期會做成原生js。

本例的資料呼叫的是鋒利的jquery一書提供的一段json。

首先要先判斷頁面怎麼樣才是滾動到底部,也就是scrolltop+window的height是否大於document的height,jquery如下**: $(window).scrolltop()+$(window).height()>=$(document).height();

再給window繫結scroll事件。所以整個頁面demo可以這樣做:

拉到底部就是實現非同步資料載入了,當然了,實際專案還要加上如果沒資料了要怎麼顯示,怎麼操作。這些加判斷就行了。

"> 

"> 

往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  往下拉  

滾動到頁面底部自動載入內容

上網時經常會看到許多酷炫的網頁,其中給我印象較深刻的是滑鼠滾動到頁面底部時會自動載入內容,一直都很好奇是怎麼樣做到的,於是自己也嘗試著寫了一下。先上個完整 吧 doctype html html lang en head meta charset utf 8 title document title...

滾動條滾動到頁面底部繼續載入

這個例項應該說可以很簡單,直接使用jquery的方法來處理也是可以的。但本文底層使用原生的js來處理,遇到一些小知識點可以分析一下也算有所得。原理很簡單,就是為window新增乙個scroll事件,瀏覽器每次觸發scroll事件時判斷是否滾動到了瀏覽器底部,如果到了底部則載入新資料。關鍵是計算滾動條...

vue滾動到底部載入

之前也做過html引用 vue的滾動到底部載入的 ref box 這個別忘了加,也可以直接在方法裡 scroll orderscroll e 高很重要!不然進不了滾動事件!踩過的坑 meal list loaddiv style height 500px overflow auto ref box ...