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 相关文章推荐
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
js 幻灯片的实现
Dec 06 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
JS正则表达式验证中文字符
May 08 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
Vuex的API文档说明详解
Feb 05 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
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
php目录拷贝实现方法
2015/07/10 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
详解PHP归并排序的实现
2016/10/18 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
理解Javascript闭包
2013/11/01 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
回顾Javascript React基础
2019/06/15 Javascript
Angular8基础应用之表单及其验证
2019/08/11 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
python 实现客户端与服务端的通信
2020/12/23 Python
详解Python模块化编程与装饰器
2021/01/16 Python
酒店销售经理岗位职责
2014/01/31 职场文书
商务英语专业求职信
2014/06/26 职场文书
小学安全汇报材料
2014/08/14 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS