AnglarJs中的上拉加载实现代码

简介上拉加载，是目前手机网站加载数据的一种常用方式，本文主要讲解AnglarJs集成，上拉加载功能。通常

简介

上拉加载，是目前手机网站加载数据的一种常用方式，本文主要讲解AnglarJs集成，上拉加载功能。通常与下拉刷新配置使用，下拉刷新请查阅。

实现

页面

  
       
 {{branch.title}}
 联系人:{{branch.linkman}} 品种:{{branch.varieties}} 价格:{{branch.price}} 
 地址:{{branch.region}}微信号:{{branch.wechatno}}
  发布时间:{{branch.releasetime}}
 loading......
 我也是有底线的

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 + "&+ 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; }] ); });

效果