本文实例为大家分享了移动端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端页面下拉 滚动分页
方法二(推荐):
插件
下载插件,引用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> }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
androidx+viewpage+tablayout+json开发(加载图片和视频)
网友评论