頁面滑動底部自動加載下一頁信息

最近移動端的項目做的比較多，記錄下一種非常實用的移動端分頁方式。

一  前端頁面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;
        }