首页 > 代码库 > 页面滑动底部自动加载下一页信息
页面滑动底部自动加载下一页信息
最近移动端的项目做的比较多，记录下一种非常使用的移动端分页方式。
一 前端页面javascript代码
设置一个全局变量。
var pageIndex = 1;然后添加页面滚动事件，如果滑动到页面底部，自动执行GetList()方法，从数据库获取第二页的数据，然后转化成json返回给前台页面。
$(document).ready(function () { $(window).scroll(function () { var nowScrolledHeight = document.documentElement.scrollTop || document.body.scrollTop; var docHeight = document.body.clientHeight; var pageHeight = window.innerHeight; var go = parseInt(docHeight) - parseInt(pageHeight); if (nowScrolledHeight >= go) { pageIndex++; GetList(); } }); });
GetList()方法的具体写法，ajax方式通过后台接口/News/GetMore获取数据，然后解析json格式的数据，进行页面输出。
function GetList() { $.ajax({ type: "POST", url: "/News/GetMore", data: "page=" + pageIndex, dataType: "json", success: function (json) { var msg = json.List; console.log(json); var listLength = msg.length; if (listLength == 0) { pageIndex--; //alert(pageIndex); } else if (listLength < 20) { for (var i = 0; i < listLength; i++) { var jsonForeach = msg[i]; var jsonObjForeach = JSON.parse(JSON.stringify(jsonForeach)); $("#newsUl").append(‘<li onclick="goDetail(‘ + jsonObjForeach.ID + ‘)">‘ + jsonObjForeach.NewsTitle + ‘ <p>‘ + jsonDateFormat(jsonObjForeach.NewsDate) + ‘</p> <img src="http://www.mamicode.com/images/1.png" width="10" /> </li>‘); } $("#newsUl").append(‘<li style="text-align:center;color:red;">无更多新闻</li>‘) } else if (listLength >= 20) { for (var i = 0; i < 20; i++) { var jsonForeach = msg[i]; var jsonObjForeach = JSON.parse(JSON.stringify(jsonForeach)); $("#newsUl").append(‘<li onclick="goDetail(‘ + jsonObjForeach.ID + ‘)">‘ + jsonObjForeach.NewsTitle + ‘ <p>‘ + jsonDateFormat(jsonObjForeach.NewsDate) + ‘</p> <img src="http://www.mamicode.com/images/1.png" width="10" /> </li>‘); } } } }); }
这里jsonDateFormat是转换json日期为年月日格式。
function jsonDateFormat(jsonDate) {//json日期格式转换为正常格式 try { var date = new Date(parseInt(jsonDate.replace("/Date(", "").replace(")/", ""), 10)); var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); return date.getFullYear() + "-" + month + "-" + day; } catch (ex) { return ""; } }
方法参照http://www.jb51.net/article/91095.htm
以上就是全部前台javascript方法，之后是后台写法。
二 C#后台代码
[HttpPost] public ActionResult GetMore(int page) { List<NewsDetails> newsList = AdminServ.Value.GetMore(page); return Json(new { List = newsList}, JsonRequestBehavior.AllowGet); }
这里我通过rownumber函数进行分页。也可以直接使用EF结合linq进行skip和take，不过那样比较浪费性能，如果数据量较大就会出现问题。
public List<NewsDetails> GetMore(int page) { List<NewsDetails> _list = new List<NewsDetails>(); try { using (LearnAndSeatEntities db = new LearnAndSeatEntities()) { int pageSize = 20; int beginNews = (page - 1) * pageSize; int endNews = beginNews + pageSize-1; string searchSql = "select * from (select ROW_NUMBER() over(order by NewsDate desc) as rowNumber, * from NewsDetails ) as temp where rowNumber between " + beginNews + " and " + endNews; _list = db.ExecuteStoreQuery<NewsDetails>(searchSql).ToList(); } } catch (Exception ex) { Common.WriteLog(ex.ToString(), "logs", "errorGetList.txt"); } return _list; }
页面滑动底部自动加载下一页信息
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。