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 相关文章推荐
JavaScript Eval 函数使用
Mar 23 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
May 25 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 Javascript
vue quill editor 使用富文本添加上传音频功能
Jan 14 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模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
纯css+js写的一个简单的tab标签页带样式
2014/01/28 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
2014/12/16 Javascript
javascript的BOM汇总
2015/07/16 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
js实现小时钟效果
2020/03/25 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
Python中的index()方法使用教程
2015/05/18 Python
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
C语言编程练习
2012/04/02 面试题
学生会个人自荐书范文
2014/02/12 职场文书
党务公开方案
2014/05/06 职场文书
营销与策划专业求职信
2014/06/20 职场文书
商家认证委托书格式
2014/10/16 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
北京英语导游词
2015/02/12 职场文书
2015年乡镇发展党员工作总结
2015/03/31 职场文书
烈士陵园扫墓感想
2015/08/07 职场文书
k8s部署redis cluster集群的实现
2021/06/24 Redis
nginx实现动静分离的方法示例
2021/11/07 Servers