基于AngularJS實(shí)現(xiàn)頁(yè)面滾動(dòng)到底自動(dòng)加載數(shù)據(jù)的功能
要實(shí)現(xiàn)這個(gè)功能,可以通過(guò) https://github.com/sroze/ngInfiniteScroll 這個(gè)第三方控件來(lái)實(shí)現(xiàn)。步驟如下:
1. 下載ng-infinite-scroll.js程序 http://sroze.github.io/ngInfiniteScroll/ 目前版本是1.0.0
2. 如果你是用的jQuery2.0以上版本,還需要修改ng-infinite-scroll.js程序,將所有的將所有的$window.xxx改為$(window).xxx, elem.xxx改為$(elem).xxx
3. 在HTML中引入script
<script type='text/javascript' src='path/to/jquery.min.js'></script>
<script type='text/javascript' src='path/to/angular.min.js'></script>
<script type='text/javascript' src='path/to/ng-infinite-scroll.min.js'></script>
4. HTML示例代碼如下:
<div ng-controller='PostListController'>
<div infinite-scroll='demo.nextPage()' infinite-scroll-disabled='demo.busy' infinite-scroll-distance=''>
<div ng-repeat='item in demo.items'>
<p>
<input type="hidden" value="{{item.PostId}}" />
<label>{{item.WriterName}}</label>
<label>{{item.WriterMail}}</label>
<label>{{item.WreckerName}}</label>
<label>{{item.StartDate}}</label>
<label>{{item.Location}}</label>
<label>{{item.Story}}</label>
</p>
</div>
<div ng-show='demo.busy'>Loading data...</div>
</div>
</div>
5. PostListController.js代碼如下:
var ftitAppModule = angular.module('ftitApp', ['infinite-scroll']);
ftitAppModule.controller('PostListController',
function ($scope, Demo) {
$scope.demo = new Demo();
});
// 創(chuàng)建后臺(tái)數(shù)據(jù)交互工廠
ftitAppModule.factory('Demo', function ($http) {
var Demo = function () {
this.items = [];
this.busy = false;
this.after = '';
this.page = ;
};
Demo.prototype.nextPage = function () {
if (this.busy) return;
this.busy = true;
var url = "http://...:/api/post/nextpage?id=" + this.page + "&callback=JSON_CALLBACK";
$http.jsonp(url).success(function (data) {
var items = data;
for (var i = ; i < items.length; i++) {
this.items.push(items[i]);
}
this.after = "t_" + this.items[this.items.length - ].id;
this.busy = false;
this.page += ;
}.bind(this));
};
return Demo;
});
這樣就實(shí)現(xiàn)了頁(yè)面拖動(dòng)到底后,從服務(wù)器自動(dòng)加載數(shù)據(jù)的功能。
PS:AngularJS的加載執(zhí)行過(guò)程
1. HTML頁(yè)面的加載,這會(huì)觸發(fā)加載頁(yè)面包含的所有JS (包括 AngularJS)
2. AngularJS啟動(dòng),搜尋所有的指令(directive)
3. 找到ng-app,搜尋其指定的模塊(Module),并將其附加到ng-app所在的組件上。
4. AnguarJS遍歷所有的子組件,查找指令和bind命令
5. 每次發(fā)現(xiàn)ng-controller或者ng-repeart的時(shí)候,它會(huì)創(chuàng)建一個(gè)作用域(scope),這個(gè)作用域就是組件的上下文。作用域指明了每個(gè)DOM組件對(duì)函數(shù)、變量的訪問(wèn)權(quán)。
6. AngularJS然后會(huì)添加對(duì)變量的監(jiān)聽(tīng)器,并監(jiān)控每個(gè)變量的當(dāng)前值。一旦值發(fā)生變化,AngularJS會(huì)更新其在頁(yè)面上的顯示。
7. AngularJS優(yōu)化了檢查變量的算法,它只會(huì)在某些特殊的事件觸發(fā)時(shí),才會(huì)去檢查數(shù)據(jù)的更新,而不是簡(jiǎn)單地在后臺(tái)不停地輪詢(xún)。
相關(guān)文章
Angular中ng-bind和ng-model的區(qū)別實(shí)例詳解
這篇文章主要介紹了Angular中ng-bind和ng-model的區(qū)別實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
Angular5整合富文本編輯器TinyMCE的方法(漢化+上傳)
TinyMCE是一個(gè)輕量級(jí)的富文本編輯器,相對(duì)于CK編輯器更加精簡(jiǎn),但必須滿(mǎn)足絕大部分場(chǎng)景的需要。這篇文章主要介紹了Angular5整合富文本編輯器TinyMCE(漢化+上傳)的相關(guān)知識(shí),需要的朋友可以參考下2020-05-05
詳解AngularJs中$resource和restfu服務(wù)端數(shù)據(jù)交互
之前小編和大家分享過(guò)使用$http同服務(wù)器進(jìn)行通信,但是功能上比較簡(jiǎn)單,angularjs還提供了另外一個(gè)可選的服務(wù)$resource,使用它可以非常方便的同支持restful的服務(wù)單進(jìn)行數(shù)據(jù)交互。下面來(lái)一起看看吧。2016-09-09
分享Angular http interceptors 攔截器使用(推薦)
AngularJS 是一個(gè) JavaScript 框架。它可通過(guò) <script> 標(biāo)簽添加到 HTML 頁(yè)面。這篇文章主要介紹了分享Angular http interceptors 攔截器使用(推薦),需要的朋友可以參考下2019-11-11
angularJS實(shí)現(xiàn)不同視圖同步刷新詳解
今天小編就為大家分享一篇angularJS實(shí)現(xiàn)不同視圖同步刷新詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
angular實(shí)現(xiàn)spa單頁(yè)面應(yīng)用實(shí)例
本篇文章主要介紹了angular實(shí)現(xiàn)spa單頁(yè)面應(yīng)用實(shí)例,小本篇文章是對(duì)單頁(yè)面的一個(gè)簡(jiǎn)單的基本邏輯操作,這個(gè)方法可以搭建基本的單頁(yè)面的邏輯結(jié)構(gòu)。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
詳解AngularJS跨頁(yè)面?zhèn)髦担╱i-router)
本篇文章主要介紹了詳解AngularJS跨頁(yè)面?zhèn)髦担╱i-router),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
Angular跨字段驗(yàn)證器中如何直接調(diào)用其它獨(dú)立的驗(yàn)證器
我們?cè)陂_(kāi)發(fā)的時(shí)候都會(huì)用到表單,那么驗(yàn)證器就是必不可少的東西,這篇文章主要給大家介紹了關(guān)于在Angular跨字段驗(yàn)證器中如何直接調(diào)用其它獨(dú)立的驗(yàn)證器的相關(guān)資料,需要的朋友可以參考下2022-03-03
angularjs實(shí)現(xiàn)table表格td單元格單擊變輸入框/可編輯狀態(tài)示例
這篇文章主要介紹了angularjs實(shí)現(xiàn)table表格td單元格單擊變輸入框/可編輯狀態(tài),涉及AngularJS事件響應(yīng)及頁(yè)面table元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-02-02

