AnglarJs中的上拉加载实现代码

简介上拉加载，是目前手机网站加载数据的一种常用方式，本文主要讲解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中的上拉加载实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！