移動(dòng)端web滾動(dòng)分頁(yè)的實(shí)現(xiàn)方法
本文實(shí)例為大家分享了移動(dòng)端web滾動(dòng)分頁(yè)展示的具體代碼,供大家參考,具體內(nèi)容如下
方法一:前端代碼:
<script type="text/javascript"> var page = 2; //當(dāng)前頁(yè)的頁(yè)碼 var flagNoData = false; //false var allpage = @Model.PageCount; //總頁(yè)碼,會(huì)從后臺(tái)獲取 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)前頁(yè)碼大于等于總頁(yè)碼 flagNoData = true; }; page += 1; //頁(yè)數(shù)加1 } }) } function scrollFn() { //真實(shí)內(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); //綁定滾動(dòng)事件 function showContent(datacontent) { $("#contentDiv").append(datacontent); } </script>
適合移動(dòng)端、PC端頁(yè)面下拉 滾動(dòng)分頁(yè)
方法二(推薦):
插件 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> }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 基于JavaScript實(shí)現(xiàn)移動(dòng)端無(wú)限加載分頁(yè)
- 用jQuery中的ajax分頁(yè)實(shí)現(xiàn)代碼
- JQuery+Ajax無(wú)刷新分頁(yè)的實(shí)例代碼
- jQuery Pagination Ajax分頁(yè)插件(分頁(yè)切換時(shí)無(wú)刷新與延遲)中文翻譯版
- Ajax讀取數(shù)據(jù)之分頁(yè)顯示篇實(shí)現(xiàn)代碼
- php,ajax實(shí)現(xiàn)分頁(yè)
- JS+Ajax+Jquery實(shí)現(xiàn)頁(yè)面無(wú)刷新分頁(yè)以及分組 超強(qiáng)的實(shí)現(xiàn)
- jQuery DataTables插件自定義Ajax分頁(yè)實(shí)例解析
- 使用PHP+JQuery+Ajax分頁(yè)的實(shí)現(xiàn)
- 微信小程序?qū)崿F(xiàn)移動(dòng)端滑動(dòng)分頁(yè)效果(ajax)
相關(guān)文章
jquery在Chrome下獲取圖片的長(zhǎng)寬問題解決
需要獲得圖片的長(zhǎng)寬,在IE、FireFox下均正常,就TMD在Chrome中不行,有人說(shuō)是Chrome版本的問題,最終終于找到了解決方法,在這與大家分享下2013-03-03JavaScript實(shí)現(xiàn)實(shí)時(shí)更新系統(tǒng)時(shí)間的實(shí)例代碼
本文給大家分享javascript實(shí)現(xiàn)實(shí)時(shí)更新系統(tǒng)時(shí)間的實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-04-04Html和JS字符串中間加空格的簡(jiǎn)單實(shí)例
最近遇到了個(gè)需求,需要在字符串的中間加上一兩個(gè)字符串,所以下面這篇文章主要給大家介紹了關(guān)于Html和JS字符串中間加空格的相關(guān)資料,文中介紹的挺詳細(xì),需要的朋友可以參考下2023-02-02Javascript的數(shù)組與字典用法與遍歷對(duì)象的技巧
Javascript 的數(shù)組Array,既是一個(gè)數(shù)組,也是一個(gè)字典(Dictionary)。先舉例看看數(shù)組的用法2012-11-11javascript 10進(jìn)制和62進(jìn)制的相互轉(zhuǎn)換
本節(jié)主要介紹了javascript 10進(jìn)制和62進(jìn)制的相互轉(zhuǎn)換,需要的朋友可以參考下2014-07-07js控制當(dāng)再次點(diǎn)擊按鈕時(shí)的間隔時(shí)間
這篇文章主要介紹通過(guò)js如何控制當(dāng)再次點(diǎn)擊按鈕是的間隔時(shí)間,需要的朋友可以參考下2014-06-06