寫在前面
在項目中，用到單頁應用的分頁，當時想到使用滾動加載的方案，可是幾次嘗試都沒配置成功，閑着無聊就弄了一個demo。
系列文章
[Angularjs]ng-select和ng-options
[Angularjs]ng-class,ng-class-even,ng-class-odd
一個例子
這里需要用到infinite-scroll，可以去這里下載：http://sroze.github.io/ngInfiniteScroll/index.html
Html
<!DOCTYPE html> <html ng-app="myapp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>滾動分頁</title> <meta charset="utf-8" /> <script src="JS/jquery.js"></script> <script src="JS/angular.js"></script> <script src="JS/ng-infinite-scroll.js"></script> <script> var app = angular.module('myapp', ['infinite-scroll']); app.controller('PersonController', function ($scope, $http) { $scope.data = { busy: false, users: [], page: 1 }; //加載更多 $scope.loadMore = function () { //是否正在加載 if ($scope.data.busy) { return; } $scope.data.busy = true; $http.get("/Service/UserInfo.ashx?page=" + $scope.data.page).success(function (data) { console.log(data); for (var i = 0; i < data.length; i++) { $scope.data.users.push(data[i]); } }); $scope.data.busy = false; $scope.data.page++; } }); //過濾器 app.filter('toGenderString', function () { return function (input) { if (input) { return '男'; } else { return '女'; } }; }); //將json格式的時間轉換成一般時間 app.filter('formatDate', function () { return function (jsondate) { jsondate = jsondate.replace("/Date(", "").replace(")/", ""); if (jsondate.indexOf("+") > 0) { jsondate = jsondate.substring(0, jsondate.indexOf("+")); } else if (jsondate.indexOf("-") > 0) { jsondate = jsondate.substring(0, jsondate.indexOf("-")); } var date = new Date(parseInt(jsondate, 10)); var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); return date.getFullYear() + "-" + month + "-" + currentDate; }; }); </script> <style type="text/css"> * { margin: 0; padding: 0; } div { width: 98%; border: 1px solid #0094ff; text-align: center; } table { margin: 3px auto; border: 0px solid #0094ff; } td { height: 30px; } </style> </head> <body> <div ng-controller="PersonController"> <div infinite-scroll="loadMore()" infinite-scroll-disabled='data.busy' infinite-scroll-distance='20'> <table cellpadding="0" cellspacing="0" border="1"> <tr><th>序號</th><th>姓名</th><th>創建時間</th><th>性別</th></tr> <tr ng-repeat="user in data.users"> <td>{{user.ID}}</td> <td>{{user.Name}} </td> <td>{{user.CreateDate|formatDate}}</td> <td>{{user.Gender|toGenderString}}</td> </tr> </table> </div> </div> </body> </html>
一般處理程序
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Caching; using System.Web.Script.Serialization; namespace Wolfy.AngularJs.Service { /// <summary> /// UserInfo 的摘要說明 /// </summary> public class UserInfo : IHttpHandler { public void ProcessRequest(HttpContext context) { int page = Convert.ToInt32(context.Request["page"]); int pageSize = 20; context.Response.ContentType = "application/json"; List<Person> lstPersons = null; var obj = context.Cache.Get("persons"); if (obj == null) { lstPersons = new List<Person>(); for (int i = 0; i < 1000; i++) { lstPersons.Add(new Person() { ID = i + 1, Gender = i % 2 == 0 ? true : false, Name = "wolfy" + (i + 1).ToString() }); } context.Cache.Insert( "persons", lstPersons, null, DateTime.Now.AddSeconds(20), Cache.NoSlidingExpiration, CacheItemPriority.Low, CacheItemRemovedCallback); } else { lstPersons = obj as List<Person>; } JavaScriptSerializer jss = new JavaScriptSerializer(); //分頁 var pageList = lstPersons.Skip(pageSize * (page - 1)).Take(pageSize); string json = jss.Serialize(pageList); context.Response.Write(json); } //這個為緩存移除時的回調函數，一定要保持與 Cache.Insert（）方法中的最后一個參數名字一致， //這里使用了委托，你可以在 Cache.Insert（）這個函數中轉定義看到的，所以這里的格式就只能按我寫的這種方法簽名寫。 public static void CacheItemRemovedCallback(string key, object value, CacheItemRemovedReason reason) { } public bool IsReusable { get { return false; } } } public class Person { /// <summary> /// 編號 /// </summary> public int ID { set; get; } /// <summary> /// 姓名 /// </summary> public string Name { set; get; } /// <summary> /// 創建時間 /// </summary> public DateTime CreateDate { set; get; } = DateTime.Now; /// <summary> /// 性別，true 男 false 女 /// </summary> public bool Gender { set; get; } = true; } }
測試結果
總結
這是在項目中用到一種分頁特效，在移動端還是用的比較多的，當時沒有弄成功，就弄了一個簡單的demo，進行了測試。當然，用個“加載更多”的按鈕，也是一種解決方案。