ionic 的 下拉刷新 与 上拉加载

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

HTML部分

  
　
  
    
      `message`.`title`
        

               

          {{message.static?message.content:message.content.substr(0, 40)}}         

      

    

            

JS部分

• 　　on-refresh 下拉触发的函数 函数执行结束之前必须广播下该事件结束 $scope.$broadcast(‘scroll.refreshComplete‘);

• 　　on-infinite 上拉触发的函数 同样需要广播事件结束 $scope.$broadcast(‘scroll.infiniteScrollComplete‘);

angular.module(‘starter.controllers‘, [])
.controller(‘InfoCtrl‘, function($rootScope, $timeout, $interval, $scope, $http, services) {
  var vm = $scope.vm = {
    moredata: false,
    messages: [],
    pagination: {
      perPage: 5,
      currentPage: 1
    },
    init: function () {
      services.getMessages({perPage: vm.pagination.perPage, page: vm.pagination.currentPage}, function (data) {
        vm.messages = data;
      })
    },
    show: function (message) {
      if (message.static) {
        message.static = false;
      } else {
        message.static = true;
      }
    },
    doRefresh: function () {
      $timeout(function () {
        $scope.$broadcast(‘scroll.refreshComplete‘);
      }, 1000);
    },
    loadMore: function () {
      vm.pagination.currentPage += 1;
      services.getMessages({perPage: vm.pagination.perPage, page: vm.pagination.currentPage}, function (data) {
        vm.messages = vm.messages.concat(data);
        if (data.length == 0) {
          vm.moredata = true;
        };
        $scope.$broadcast(‘scroll.infiniteScrollComplete‘);
      })
    } 
  }
  vm.init();
})

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