AnglarJs 의 상단 로드 실현 코드
위로 끌 어 올 리 는 것 은 현재 핸드폰 사이트 에서 데 이 터 를 불 러 오 는 데 자주 사용 되 는 방식 이다.본 고 는 주로 AnglarJs 통합,위로 끌 어 올 리 는 기능 을 설명 한다.보통 드 롭 다운 리 셋 설정 과 함께 사용 합 니 다.드 롭 다운 리 셋 은 찾 아 보 세 요.
이루어지다
페이지
<div class="search-box">
<b class="dw" ></b>
<input type="search" class="search-input" placeholder=" " ng-model="catparm">
<b class="dw" ng-click="serchcat()"><img src="{{basepath}}images/cg-app-search.png"></b>
</div>
<div class="list-box" >
<div infinite-scroll='catinfo.nextPage()' infinite-scroll-disabled='catinfo.busy' infinite-scroll-distance='' id="catinfolist">
<ul>
<li ng-repeat='branch in catinfo.items'>
<!-- <li ng-repeat="branch in branchs">-->
<a ng-click="showqr(branch.qr)">
<dl>
<dt class="search-key-img">
<img ng-src="{{branch.catimg}}">
</dt>
<dd class="search-key-title">
<p>{{branch.title}}</p>
</dd>
<dd class="search-key-info">
<span> :{{branch.linkman}} </span><span> :{{branch.varieties}} </span> <span style="color: red;"> :{{branch.price}} </span>
</dd>
<dd class="search-key-tag">
<span> :{{branch.region}}</span><span ng-if="branch.wechatno !=''"> :{{branch.wechatno}}</span>
</dd>
<dd class="search-key-tag">
<p> :{{branch.releasetime}}</p>
</dd>
</dl>
</a>
</li>
</ul>
<div ng-if="catinfo.items.length >= 10 ">
<div ng-show='catinfo.busy' align="center" style="margin-top:5px; "><!--<img src="{{basepath}}images/729.GIF" style="width:50px;height:50px;">-->loading......</div>
</div>
<div ng-if="catinfo.items.length % 10 !=0 ">
<p class="get-more"> </p>
</div>
</div>
<dialog load-data="data"></dialog>
</div>
controller 에서 로드 기능 사용
app.controller('wdListCtrl', ['$scope','catInfoService', function ($scope,catInfoService) {
// service
$scope.catinfo = new catInfoService();
패키지 에 CatInfoService.js 를 불 러 옵 니 다.
/** 2017-10-26
* :
* :
*/
define(['jquery','app'], function ($,app) {
app.service('catInfoService', ['$location','$http', function($location,$http) {
var CatInfo = function () {
this.items =null;
this.busy = false;
this.after = '';
this.page = 1;
this.pagenum =10;
this.title = '';
this.varieties ='';
};
CatInfo.prototype.nextPage = function () {
if (this.busy) return;
this.busy = true;
var url = baseurl+" ?page=" + this.page + "&pagenum="+ this.pagenum + "&title="+this.title+ "&varieties="+this.varieties+"&callback=JSON_CALLBACK";
$http.jsonp(url).success(function(data) {
var items =data.data;
console.log(items);
if( this.items == null){
this.items=items;
}else{
for (var i =0;i < items.length; i++) {
this.items.push(items[i]);
}
}
this.after = "t_" + this.items[this.items.length -1 ].id;
if(items != null){
if(items.length< 10){
this.busy = true;
}else{
this.busy = false;
}
}
this.page +=1;
}.bind(this));
};
return CatInfo;
}] );
});
효과.총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 AnglarJs 의 상단 에 실현 코드 를 불 러 오 는 것 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!