页面滑动底部自动加载下一页信息

Posted 2020-10-02 SeedQi

最近移动端的项目做的比较多，记录下一种非常使用的移动端分页方式。

一  前端页面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="/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="/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;
        }