angular+ionic 的app上拉加载更新数据实现方法

 更新时间:2017年01月16日 13:56:53   投稿:mrr  
这篇文章主要介绍了angular+ionic 的app上拉加载更新数据实现方法,需要的的朋友参考下

第一步,首先需要在<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上拉加载更新数据实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Angular Tree Shaking优化机制原理详解

    Angular Tree Shaking优化机制原理详解

    这篇文章主要为大家介绍了Angular Tree Shaking优化机制原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • 简单实现AngularJS轮播图效果

    简单实现AngularJS轮播图效果

    这篇文章主要教大家如何简单实现AngularJS轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • Angular.JS学习之依赖注入$injector详析

    Angular.JS学习之依赖注入$injector详析

    随着javaEE的spring框架的兴起,依赖注入(IoC)的概念彻底深入人心,它彻底改变了我们的编码模式和思维。在AngularJS中也有依赖注入的概念,像spring中的依赖注入,但是又有所不同。Angular中只需要在需要的地方声明一下即可,类似模块的引用,因此十分方便。
    2016-10-10
  • angular 组件通信的几种实现方式

    angular 组件通信的几种实现方式

    这篇文章主要介绍了angular 组件通信的几种实现方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Angular如何引入第三方库的方法详解

    Angular如何引入第三方库的方法详解

    本篇文章主要介绍了Angular如何引入第三方库的方法详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 浅析AngularJs HTTP响应拦截器

    浅析AngularJs HTTP响应拦截器

    这篇文章主要介绍了浅析AngularJs HTTP响应拦截器的相关资料,需要的朋友可以参考下
    2015-12-12
  • Angular 组件之间的交互的示例代码

    Angular 组件之间的交互的示例代码

    这篇文章主要介绍了Angular 组件之间的交互的示例代码,根据数据的传递方向,分为父组件向子组件传递、子组件向父组件传递及通过服务传递三种交互方法。非常具有实用价值,需要的朋友可以参考下
    2018-03-03
  • angularJs使用ng-repeat遍历后选中某一个的方法

    angularJs使用ng-repeat遍历后选中某一个的方法

    今天小编就为大家分享一篇angularJs使用ng-repeat遍历后选中某一个的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • AnjularJS中$scope和$rootScope的区别小结

    AnjularJS中$scope和$rootScope的区别小结

    这篇文章给大家整理了关于AnjularJS中$scope和$rootScope的区别,文中运用实例代码介绍的很详细,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-09-09
  • Angularjs实现数组随机排序的方法

    Angularjs实现数组随机排序的方法

    今天小编就为大家分享一篇Angularjs实现数组随机排序的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10

最新评论