第一步,首先需要在<ion-content>标签里面加入标签<ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="5%"></ion-infinite-scroll>

里面的属性解释,

ng-if  值 布尔型,如果为true,则可以触发上拉事件
on-infinite 上拉时触发的事件
distance 列表底部滚动到可触发上拉事件的距离,默认为1%
icon 加载时显示的加载图标,默认为 'ion-loading-d'

第二步:在控制器内书写

$scope.hasmore = true; 

定义可触发事件的对象

然后书写loadMore事件

//上拉事件 
    $scope.loadMore = function () { 
      $scope.dataValue.page  ; 
      loadajax(); 
    } 

然后写loadajax事件

function loadajax() { 
      var dataValue = $scope.dataValue; 
      var ip = "http://"   $rootScope.form.ip   "/appGetpage"; 
      var req = { 
        method: 'POST', //请求的方式 
        url: ip, //请求的地址 
        headers: { 
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 
          'Accept': '*/*' 
        }, //请求的头,如果默认可以不写 
        timeout: 5000, //超时时间,还没有测试 
        data: "value="   JSON.stringify(dataValue) //message 必须是a=b&c=d的格式 
      }; 
      $http(req).success(function (data) { 
        if (data.data.length == 0) { 
          $scope.hasmore = false;//这里判断是否还能获取到数据,如果没有获取数据,则不再触发加载事件 
          return; 
        } 
        $scope.items = $scope.items.concat(data.data); 
      }).error(function () { 
        console.log("err"); 
      }).finally(function () { 
        $scope.$broadcast('scroll.infiniteScrollComplete');//这里是告诉ionic更新数据完成,可以再次触发更新事件 
        $scope.$broadcast('scroll.refreshComplete'); 
      }); 
    } 

以上所述是小编给大家介绍的angular ionic 的app上拉加载更新数据实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对Devmax网站的支持!

angular+ionic 的app上拉加载更新数据实现方法的更多相关文章

  1. 详解如何通过H5(浏览器/WebView/其他)唤起本地app

    这篇文章主要介绍了详解如何通过H5(浏览器/WebView/其他)唤起本地app的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. H5混合开发app如何升级的方法

    本篇文章主要介绍了H5混合开发app如何升级的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  3. html5唤起app的方法

    这篇文章主要介绍了html5唤起app的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  4. xcode – 上传到App Store时进行身份验证

    只需为现有安装/文件夹创建备份,这很重要,因为在(新)安装期间,Transporter将删除以前的安装:现在运行以下命令来更新Transporter:希望这有助于某人.

  5. Ionic – Splash Screen适用于iOS,但不适用于Android

    我有一个离子应用程序,其中使用CLI命令离子资源生成的启动画面和图标iOS版本与正在渲染的启动画面完美配合,但在Android版本中,只有在加载应用程序时才会显示白屏.我检查了config.xml文件,所有路径看起来都是正确的,生成的图像出现在相应的文件夹中.(我使用了splash.psd模板来生成它们.我错过了什么?这是config.xml文件供参考,我觉得我在这里做错了–解决方法在config.xml中添加以下键:它对我有用!

  6. App store拒绝应用程序在iOs 10上支持IPV6网络

    我收到苹果公司的app拒绝邮件,下面是我们在连接到IPv6网络的Wi-Fi上运行iOS10.0.2的iPad和iPhone上查看了应用中的一个或多个错误.具体来说,应用程序在启动时仍保留在启动屏根据他们的要求,我已经在我的Mac上创建了NAT64网络,并为iPhone5S设备10.0.2os版本共享了互联网,App工作正常,但苹果称其不与IPv6合作任何人都可以确认我需要检查其他什么吗?

  7. ios – 我如何从iPhone中提取IPA以从App Store下载以便我可以在IPA中查看资产?

    我最喜欢的应用程序之一已从应用程序商店中删除,我想因为它没有在太长时间内更新.我有一台旧设备,但没有下载到我的新手机上.如何获得IPA以便我可以查看应用程序包并查看应用程序中的资产?

  8. Ionic anchorscroll无法在iOS上运行

    我在我的离子应用程序中使用$anchorscroll,在Android上它运行正常但在iOS上我的内容在滚动后卡住了,我无法向上滚动.我尝试使用overflow-scroll=“true”,但这在我的应用程序中都不起作用…有人可以帮我这个吗?

  9. ios – – [Not A Type _cfTypeID]:发送到解除分配的实例的消息

    我正在使用代码为图像提供不同的效果,如对比度,色调,饱和度等;并使用了appleglImageProcessing代码,我从我的视图跳转到glimgeProcessing,并将结果图像保存到appDelegate文件中的uiimage属性.从Eagle视图返回后,我使用viewDidAppear函数将我的图像视图更改为更新的图像我的代码是我的日志响应是尝试将图像设置为我的imageView时出现问

  10. iOS扩展:是否需要增加其捆绑版本(CFBundleVersion)?

    我是否必须在我的扩展程序的Info.plist中增加CFBundLeversion以确保它覆盖现有的?或者,如果在主应用程序的Info.plist中这样做就足够了?

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部