你的位置:首页 > Java教程

[Java教程]【转载】 ionic 的 下拉刷新 与 上拉加载


这篇文章是讲解 Ioinc中怎么实现 下拉刷新和上拉加载的。也是我们日常做项目是必不可少的功能。有兴趣的小伙伴可以来学习一下。

更多关于 IONIC 的资源: http://www.aliyue.net/?s=ionic

HTML部分

 1 <ion-view view-title="消息通知"> 2  <ion-content class="padding"> 3  <!-- <ion-refresher> 下拉刷新指令 --> 4  <ion-refresher pulling-text="Pull to refresh" on-refresh="vm.doRefresh()"></ion-refresher> 5   <div class="list card" ng-repeat="message in vm.messages" > 6    <div class="item item-divider item-icon-right">{{message.title}} 7     <i class="icon" ng-click="vm.show(message)" ng-class="message.static?‘ion-arrow-down-b‘:‘ion-arrow-right-b‘"></i></div> 8    <div class="item item-body"> 9     <div>10      {{message.static?message.content:message.content.substr(0, 40)}}11     </div>12    </div>13   </div>14   <!-- ion-infinite-scroll 上拉加载数据指令 distance默认1% nf-if的值为false时,就禁止执行on-infinite -->15   <ion-infinite-scroll ng-if="!vm.moredata" on-infinite="vm.loadMore()" distance="1%" ></ion-infinite-scroll>16  </ion-content>17 </ion-view>

 

JS部分

  •   on-refresh 下拉触发的函数 函数执行结束之前必须广播下该事件结束 $scope.$broadcast(‘scroll.refreshComplete‘);
  •   on-infinite 上拉触发的函数 同样需要广播事件结束 $scope.$broadcast(‘scroll.infiniteScrollComplete‘);
 1 angular.module(‘starter.controllers‘, []) 2 .controller(‘InfoCtrl‘, function($rootScope, $timeout, $interval, $scope, $http, services) { 3  var vm = $scope.vm = { 4   moredata: false, 5   messages: [], 6   pagination: { 7    perPage: 5, 8    currentPage: 1 9   },10   init: function () {11    services.getMessages({perPage: vm.pagination.perPage, page: vm.pagination.currentPage}, function (data) {12     vm.messages = data;13    })14   },15   show: function (message) {16    if (message.static) {17     message.static = false;18    } else {19     message.static = true;20    }21   },22   doRefresh: function () {23    $timeout(function () {24     $scope.$broadcast(‘scroll.refreshComplete‘);25    }, 1000);26   },27   loadMore: function () {28    vm.pagination.currentPage += 1;29    services.getMessages({perPage: vm.pagination.perPage, page: vm.pagination.currentPage}, function (data) {30     vm.messages = vm.messages.concat(data);31     if (data.length == 0) {32      vm.moredata = true;33     };34     $scope.$broadcast(‘scroll.infiniteScrollComplete‘);35    })36   } 37  }38  vm.init();39 })

此处的messages 是view显示的数据,pagination是做分页加载显示的参数,service是我封装的$http服务,show方法是view信息显示的开关(这些都可以不用注意)!

部分转载自:http://www.cnblogs.com/ailen226/p/4626166.html