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 相关文章推荐
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
May 29 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 Javascript
使用命令行工具npm新创建一个vue项目的方法
Dec 27 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
javascript实现日历效果
Jun 17 Javascript
世界上最短的数字判断js代码
Sep 09 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 Javascript
vue实现pdf文档在线预览功能
Nov 26 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
深入了解php4(1)--回到未来
2006/10/09 PHP
php中用foreach来操作数组的代码
2011/07/17 PHP
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
tp5.0框架隐藏index.php入口文件及模块和控制器的方法分析
2020/02/11 PHP
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
详解Node.Js如何处理post数据
2016/09/19 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
Flask之flask-session的具体使用
2018/07/26 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
python实现小世界网络生成
2019/11/21 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
网络教育自我鉴定
2013/11/01 职场文书
事务机电主管工作职责
2014/02/25 职场文书
优秀班集体申报材料
2014/12/25 职场文书
上甘岭观后感
2015/06/10 职场文书
Python序列化模块JSON与Pickle
2022/06/05 Python