AnglarJs中的上拉加载实现代码

 更新时间:2018年02月08日 09:54:15   作者:FANQIBU  
上拉加载,是目前手机网站加载数据的一种常用方式,本文主要讲解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中的上拉加载实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • angularjs结合html5实现拖拽功能

    angularjs结合html5实现拖拽功能

    本篇文章给大家分享了angularjs结合html5实现拖拽功能的方法以及代码实例,有兴趣的朋友参考下。
    2018-06-06
  • angular报错can't resolve all parameters for []的解决

    angular报错can't resolve all parameters&nb

    这篇文章主要介绍了angular报错can't resolve all parameters for []的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • angular4 JavaScript内存溢出问题

    angular4 JavaScript内存溢出问题

    本篇文章主要介绍了angular4 JavaScript内存溢出问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • AngularJS模仿Form表单提交的实现代码

    AngularJS模仿Form表单提交的实现代码

    本文通过一段实例代码给大家简单介绍了angularjs模仿form表单提交的方法,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-12-12
  • AngulerJS学习之按需动态加载文件

    AngulerJS学习之按需动态加载文件

    本篇文章主要介绍了AngulerJS学习之按需动态加载文件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • Angular移动端页面input无法输入的解决方法

    Angular移动端页面input无法输入的解决方法

    下面小编就为大家带来一篇Angular移动端页面input无法输入的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • angular分页指令操作

    angular分页指令操作

    这篇文章主要为大家详细介绍了angular分页指令操作的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0

    详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0

    本篇文章主要介绍了详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0,具有一定的参考价值,有兴趣的可以了解一下
    2017-05-05
  • AngularJS开发教程之控制器之间的通信方法分析

    AngularJS开发教程之控制器之间的通信方法分析

    这篇文章主要介绍了AngularJS开发教程之控制器之间的通信方法,结合实例形式较为详细的分析了AngularJS控制器之间通信的三种常用方式及相关使用技巧,需要的朋友可以参考下
    2016-12-12
  • 详解Angular如何正确的操作DOM

    详解Angular如何正确的操作DOM

    这篇文章主要介绍了详解Angular如何正确的操作DOM,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07

最新评论