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 &gt;= 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中的上拉加载实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！