这篇文章给大家分享的是有关移动端web如何实现滚动分页的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
方法一:前端代码:
<script type="text/javascript"> var page = 2; //当前页的页码 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) { //要执行的内容 showContent(data); if (currentIndex >= allpage) { //当前页码大于等于总页码 flagNoData = true; }; page += 1; //页数加1 } }) } function scrollFn() { //真实内容的高度 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) { //数据全部加载完了 return; } else if (pageHeight - viewportHeight - scrollHeight < 10) { //如果满足触发条件,执行 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> }
感谢各位的阅读!关于“移动端web如何实现滚动分页”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。