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

效果