移動端web滾動分頁的實現(xiàn)方法
更新時間:2017年05月05日 10:50:10 作者:北平123
這篇文章主要為大家詳細(xì)介紹了移動端web滾動分頁的實現(xiàn)方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了移動端web滾動分頁展示的具體代碼,供大家參考,具體內(nèi)容如下
方法一:前端代碼:
<script type="text/javascript"> var page = 2; //當(dāng)前頁的頁碼 var flagNoData = false; //false var allpage = @Model.PageCount; //總頁碼,會從后臺獲取 function showAjax(currentIndex) { $.ajax({ url: "@Url.Action("GetEmployeeData", "Home")", type: "GET", data: {"pageNum":currentIndex}, success: function (data) { //要執(zhí)行的內(nèi)容 showContent(data); if (currentIndex >= allpage) { //當(dāng)前頁碼大于等于總頁碼 flagNoData = true; }; page += 1; //頁數(shù)加1 } }) } function scrollFn() { //真實內(nèi)容的高度 var pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight); //視窗的高度 var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0; //隱藏的高度 var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; if (flagNoData) { //數(shù)據(jù)全部加載完了 return; } else if (pageHeight - viewportHeight - scrollHeight < 10) { //如果滿足觸發(fā)條件,執(zhí)行 showAjax(page); } } $(window).bind("scroll", scrollFn); //綁定滾動事件 function showContent(datacontent) { $("#contentDiv").append(datacontent); } </script>
適合移動端、PC端頁面下拉 滾動分頁
方法二(推薦):
插件 https://github.com/ximan/dropload
下載插件,引用css 和 js:
<link rel="stylesheet" href="~/Content/dropload.css" rel="external nofollow" /> <script type="text/javascript" src="~/Scripts/dropload.min.js"></script>
@section scripts{ <script type="text/javascript" src="~/Scripts/dropload.min.js"></script> <script type="text/javascript"> $(function () { var page = 1; var pageSize = 10; $(".content").dropload({ scrollArea: window, loadDownFn: function (me) { page++; var result = ''; $.ajax({ url: "@Url.Action("GetEmployeeData", "Home")", type: "GET", data: { "pageNum": page }, success: function (data) { var arrlen = data.length; if (arrlen > 0) { showContent(data); me.resetload(); } else { me.lock(); me.noData(); } }, error: function (xhr, type) { alert('Ajax error:' + xhr + type); me.resetload(); } }) } }) }); function showContent(datacontent) { $("#contentDiv").append(datacontent); } </script> }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 基于JavaScript實現(xiàn)移動端無限加載分頁
- 用jQuery中的ajax分頁實現(xiàn)代碼
- JQuery+Ajax無刷新分頁的實例代碼
- jQuery Pagination Ajax分頁插件(分頁切換時無刷新與延遲)中文翻譯版
- Ajax讀取數(shù)據(jù)之分頁顯示篇實現(xiàn)代碼
- php,ajax實現(xiàn)分頁
- JS+Ajax+Jquery實現(xiàn)頁面無刷新分頁以及分組 超強的實現(xiàn)
- jQuery DataTables插件自定義Ajax分頁實例解析
- 使用PHP+JQuery+Ajax分頁的實現(xiàn)
- 微信小程序?qū)崿F(xiàn)移動端滑動分頁效果(ajax)
相關(guān)文章
JavaScript實現(xiàn)實時更新系統(tǒng)時間的實例代碼
本文給大家分享javascript實現(xiàn)實時更新系統(tǒng)時間的實例代碼,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-04-04Javascript的數(shù)組與字典用法與遍歷對象的技巧
Javascript 的數(shù)組Array,既是一個數(shù)組,也是一個字典(Dictionary)。先舉例看看數(shù)組的用法2012-11-11javascript 10進制和62進制的相互轉(zhuǎn)換
本節(jié)主要介紹了javascript 10進制和62進制的相互轉(zhuǎn)換,需要的朋友可以參考下2014-07-07