PHP+InfiniteScroll網頁無限滾動載入資料例項
PHP+InfiniteScroll實現網頁無限滾動載入資料例項,實現原理:當捲軸到底離網頁底部一定長度的時候,向後臺傳送頁數並獲取資料。
首先我們在頁面上先放置10條資料,即第一頁,每一項都是p標籤:
<div id="content"> <p><a href="#" target="_blank">1、PHP生成圖片驗證碼</a></p> <p><a href="#" target="_blank">2、jQuery實現table上移下移和置頂</a></p> <p><a href="#" target="_blank">3、基於jQuery的cookie外掛</a></p> <p><a href="#" target="_blank">4、jQuery仿淘寶圖片放大鏡外掛imagezoom</a></p> <p><a href="#" target="_blank">5、簡單jQuery商品屬性選擇表單</a></p> ....... </div>
接著我們再放入導航的選擇器#pages和下一頁#next,.loading可不放。
<div id="pages"><a id="next" href="page.php?page=1">下一頁</a></div> <div class="loading"></div>
然後我們引入jQuery庫、debug.js(除錯)及jquery.infinitescroll.js外掛和js程式碼:
<script type="text/javascript" src="jquery.js"></script> <script src="debug.js"></script> <script src="jquery.infinitescroll.js"></script> <script> $('#content').infinitescroll({ loading: { msgText: "", img: "images/loading.gif", finishedMsg: '沒有新資料了哦...', selector: '.loading' //loading選擇器 }, navSelector: "#pages", //導航的選擇器,會被隱藏 nextSelector: "#next",//包含下一頁連結的選擇器 itemSelector: "p",//你將要取回的選項(內容塊) debug: true, //啟用除錯資訊,若啟用必須引入debug.js dataType: 'html',//格式要和itemSelector保持一致 maxPage: 5,//最大載入的頁數 // animate: true, //當有新資料載入進來的時候,頁面是否有動畫效果,預設沒有 extraScrollPx: 150, //捲軸距離底部多少畫素的時候開始載入,預設150 // bufferPx: 40, //載入資訊的顯示時間,時間越大,載入資訊顯示時間越短 errorCallback: function() { //載入完資料後的回撥函式 }, path: function(index) { //獲取下一頁方法 return "page.php?p=" + index; }, }, function(newElements, data, url) { //回撥函式 //console.log(data); //alert(url); }); </script>
本文轉自:
轉載請註明出處!
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31545264/viewspace-2672947/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 拖動滾動條載入資料程式碼例項
- 拖動滾動條實現網頁內容自動載入程式碼例項網頁
- js下拉滾動條瀑布流載入資料程式碼例項JS
- 移動端無限滾動載入 js實現原理JS
- 關於頁面無限滾動思路
- 設計無限滾動下拉載入,實踐高效能頁面真諦
- Xamarin.Forms: 無限滾動的ListView(懶載入方式)ORMView
- js瀑布流滾動無限載入(路徑需要修改)JS
- “無限滾動載入”適用於你的產品嗎?
- 網頁title標題滾動效果程式碼例項網頁
- Vxe UI vxe-table 4.8+ 實現無限載入+虛擬滾動、行與列的無限載入UI
- [譯] 使用 Angular 和 RxJS 實現的無限滾動載入AngularJS
- Vue 無限滾動元件Vue元件
- 10行程式碼實現頁面無限滾動行程
- 滾動優化(無限滾動載入、滾動元素內有大量dom,造成卡頓問題的優化方案)優化
- 走近Fusion元件——無限滾動元件
- Framework7 無限滾動Framework
- javascript無限迴圈滾動JavaScript
- 頁面全屏垂直平滑滾動程式碼例項
- 無限滾動HTML UL結構HTML
- angular 監聽 Windows 滾動事件 實現頁面滾動載入AngularWindows事件
- 小程式:無限自動滾動的Gallery
- 使用 jQuery Ajax 在頁面滾動時從伺服器載入資料jQuery伺服器
- js文字橫向無縫滾動程式碼例項JS
- 啟動頁無法載入
- Android 動態載入資源例項解析Android
- [譯] Angular: 使用 RxJS Observables 來實現簡易版的無限滾動載入指令AngularJS
- javascript無限級求和程式碼例項JavaScript
- iOS開發之UIScrollView無限滾動iOSUIView
- 無限滾動的最佳實踐經驗
- 安卓中如何實現無限滾動列表安卓
- vue 滾動載入Vue
- 基於 Vue.js 的移動端元件庫mint-ui實現無限滾動載入更多Vue.js元件UI
- 資料庫startup啟動時前滾回滾進行例項恢復的理解資料庫
- 基於echarts非同步載入資料之多個series載入例項Echarts非同步
- [譯] 使用響應式程式設計來實現簡易版的無限滾動載入程式設計
- 使用RecycleView實現無限滾動的日曆View
- 使用 laravel8 + ajax 實現無限滾動Laravel