Home  >  Article  >  Web Front-end  >  Use AnglarJs to implement pull-up loading

Use AnglarJs to implement pull-up loading

亚连
亚连Original
2018-06-07 11:04:351448browse

Pull-up loading is a common way to load data on mobile websites. This article mainly explains AnglarJs integration and pull-up loading function.

Introduction

Pull-up loading is a common way to load data on mobile websites. This article mainly explains AnglarJs integration and pull-up loading. Function. Usually used with pull-down refresh configuration, please refer to pull-down refresh.

Implementation of

Page

 <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="{{basepath}}images/cg-app-search.png"></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 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 !=&#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="{{basepath}}images/729.GIF" style="width:50px;height:50px;">-->loading......</p>
   </p>
   <p ng-if="catinfo.items.length % 10 !=0 ">
    <p class="get-more">我也是有底线的</p>
   </p>
  </p>
  <dialog load-data="data"></dialog>
 </p>

The pull-up loading function in the controller uses

app.controller(&#39;wdListCtrl&#39;, [&#39;$scope&#39;,&#39;catInfoService&#39;, function ($scope,catInfoService) {
//下拉加载service
 $scope.catinfo = new catInfoService();

to encapsulate the pull-up Loading CatInfoService.js

/** 2017-10-26
 *作者:卜凡起
 *功能:
 */
define([&#39;jquery&#39;,&#39;app&#39;], function ($,app) {
 app.service(&#39;catInfoService&#39;, [&#39;$location&#39;,&#39;$http&#39;, function($location,$http) {
  var CatInfo = function () {
   this.items =null;
   this.busy = false;
   this.after = &#39;&#39;;
   this.page = 1;
   this.pagenum =10;
   this.title = &#39;&#39;;
   this.varieties =&#39;&#39;;
  };
  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;
 }] );
});

Effect

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

react project development

Implementing multiple routing implementations in Vue-Router2.X

Detailed interpretation of react controlled components and uncontrolled components

The above is the detailed content of Use AnglarJs to implement pull-up loading. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn