AnglarJs中的上拉加载实现代码


Posted in Javascript onFebruary 08, 2018

简介

上拉加载,是目前手机网站加载数据的一种常用方式,本文主要讲解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 >= 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中的上拉加载实现代码

总结

以上所述是小编给大家介绍的AnglarJs中的上拉加载实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery+JSon 无刷新分页实现代码
Apr 01 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
详解vue表单——小白速看
Apr 08 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 Javascript
vue如何使用外部特殊字体的操作
Jul 30 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 #Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 #Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 #Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 #Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 #Javascript
Ionic学习日记实现验证码倒计时
Feb 08 #Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 #Javascript
You might like
php输出指定时间以前时间格式的方法
2015/03/21 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
vue使用stompjs实现mqtt消息推送通知
2017/06/22 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python中Apriori算法实现讲解
2017/12/10 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
美术专业学生个人自我评价
2013/09/19 职场文书
自我鉴定模板
2013/10/29 职场文书
毕业生自荐信
2013/12/14 职场文书
教师师德反思材料
2014/02/15 职场文书
暑期培训随笔感言
2014/03/10 职场文书
大型营销活动计划书
2014/04/28 职场文书
大学生找工作求职信
2014/07/09 职场文书
安全施工责任书
2014/08/25 职场文书
捐款活动总结
2014/08/27 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书