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的数据类型(示例代码)
Dec 11 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 Javascript
vue-resource 拦截器(interceptor)的使用详解
Jul 04 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
Sep 27 Javascript
vue 中的 render 函数作用详解
Feb 28 Javascript
前端vue如何使用高德地图
Nov 05 Javascript
三剑客:offset、client和scroll还傻傻分不清?
Dec 04 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代码包装修正版
2008/03/15 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
基于jQuery的仿flash的广告轮播代码
2010/11/04 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
js实现简单计算器
2015/11/22 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
vue axios用法教程详解
2017/07/23 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python实现字符串逆序输出功能示例
2017/06/24 Python
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
pytorch 共享参数的示例
2019/08/17 Python
python zip()函数使用方法解析
2019/10/31 Python
Python如何省略括号方法详解
2020/03/21 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
华为慧通笔试题
2016/04/22 面试题
RealTek面试题
2016/06/28 面试题
旷工检讨书1000字
2015/01/01 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
索尼ICF-36收音机评测
2022/04/30 无线电
Win2008系统搭建DHCP服务器
2022/06/25 Servers