AnglarJs を使用してプルアップ読み込みを実装する

プルアップ読み込みはモバイル Web サイトでデータを読み込む一般的な方法です。この記事では主に AnglarJs の統合とプルアップ読み込み機能について説明します。

はじめに

この記事では、モバイル Web サイトでデータをロードする一般的な方法として、AnglarJs の統合とプルアップ ロード機能について説明します。通常はプルダウン リフレッシュ構成で使用されます。プルダウン リフレッシュを参照してください。

ページ

 <p 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="/static/imghwm/default1.png"  data-src="{{basepath}}images/cg-app-search.png"  class="lazy"   alt="AnglarJs を使用してプルアップ読み込みを実装する" ></b>
 </p>
 <p class="list-box" >
  <p infinite-scroll=&#39;catinfo.nextPage()&#39; infinite-scroll-disabled=&#39;catinfo.busy&#39; infinite-scroll-distance=&#39;&#39; id="catinfolist">
  <ul>
   <li ng-repeat=&#39;branch in catinfo.items&#39;>
  <!-- <li ng-repeat="branch in branchs">-->
   <a ng-click="showqr(branch.qr)">
   <dl>
   <dt class="search-key-img">
    <img  src="/static/imghwm/default1.png"  data-src="{{branch.catimg}}"  class="lazy"  ng- alt="AnglarJs を使用してプルアップ読み込みを実装する" >
   </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 !=&#39;&#39;">微信号:{{branch.wechatno}}</span>
    </dd>
    <dd class="search-key-tag">
     <p> 发布时间:{{branch.releasetime}}</p>
    </dd>
   </dl>
   </a>
  </li>
  </ul>
   <p ng-if="catinfo.items.length >= 10 ">
    <p ng-show=&#39;catinfo.busy&#39; align="center" style="margin-top:5px; "><!--<img  src="/static/imghwm/default1.png"  data-src="{{basepath}}images/729.GIF"  class="lazy"     style="max-width:90%" alt="AnglarJs を使用してプルアップ読み込みを実装する" >-->loading......</p>
   </p>
   <p ng-if="catinfo.items.length % 10 !=0 ">
    <p class="get-more">我也是有底线的</p>
   </p>
  </p>
  <dialog load-data="data"></dialog>
 </p>

コントローラーにプルアップ読み込み関数を実装します。

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

効果

上記は、私が皆さんのためにまとめたものです, 今後も活用させていただきますので、皆様のお役に立てれば幸いです。

関連記事:

reactプロジェクト開発

Vue-Router2.Xでの複数のルーティング実装の実装

react制御コンポーネントと非制御コンポーネントの詳細な解釈

以上がAnglarJs を使用してプルアップ読み込みを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。