Angular JS 上拉刷新，下拉加载

林和畅

2023-12-01

前言：最近在做一个项目用的Angular1.x 写了一些页面，现在遇到一个问题，需要实现列表页面的下拉刷新及上拉加载。于是乎进行了各种百度，刚开始搜的是“js 上拉刷新下拉加载”，可是发现搜出来的都是jq ajax 请求数据，与现在的angular加载数据的方式有所区别，显然是用着是不太合适的。接着百度了“angular 上拉刷新下拉加载”，打开一看发现根本看不懂，无意间发现了《ionic》（之前从来没见过，angular也是自学的），写这个文章是为了让自己以后遇到这种情况时可以参考，整合一下自己所查到的，方便你我。

ionic 简介

ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。

ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。

ionic是一个轻量的手机UI库，具有速度快，界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题，它直接放弃了IOS6和Android4.1以下的版本支持，来获取更好的使用体验。

ionic 特性

ionic 基于Angular语法，简单易学。
ionic 是一个轻量级框架。
ionic 完美的融合下一代移动框架，支持 Angularjs 的特性， MVC ，代码易维护。
ionic 提供了漂亮的设计，通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。
ionic 专注原生，让你看不出混合应用和原生的区别
ionic 提供了强大的命令行工具。
ionic 性能优越，运行速度快。

首先头部需要引入以下文件（如项目中引入以下文件，则不用引入angular.js，如果引入angular.js刷新加载无效）

<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>

下拉刷新

以下代码参考菜鸟教程 http://www.runoob.com/ionic/ionic-ion-refresher.html

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>菜鸟教程(runoob.com)</title>
<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
<script type="text/javascript">
angular.module('starter', ['ionic']).run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
}).controller('actionsheetCtl', ['$scope', '$timeout', '$http', function($scope, $timeout, $http) {
  $scope.items = [{
    "name": "HTML5"
  }, {
    "name": "JavaScript"
  }, {
    "name": "Css3"
  }];
  $scope.doRefresh = function() {
    $http.get('http://www.runoob.com/try/demo_source/item.json') //注意改为自己本地的地址，不然会有跨域问题
      .success(function(newItems) {
        $scope.items = newItems;
      }).finally(function() {
        $scope.$broadcast('scroll.refreshComplete');
      });
  };
}])
</script>
</head>
<body ng-app="starter" ng-controller="actionsheetCtl">
<ion-pane>
  <ion-content>
    <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>
    <ion-list>
      <ion-item ng-repeat="item in items" ng-bind="item.name"></ion-item>
    </ion-list>
  </ion-content>
</ion-pane>
</body>
</html>

上拉加载

以下代码仅供参考

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>菜鸟教程(runoob.com)</title>
<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
<script type="text/javascript">
angular.module('starter', ['ionic']).run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
}).controller('actionsheetCtl', ['$scope', '$timeout', '$http', function($scope, $timeout, $http) {
  $scope.items = [{
    "name": "HTML5"
  }, {
    "name": "JavaScript"
  }, {
    "name": "Css3"
  }];
  $scope.hasMore = false;
  $scope.doRefresh = function() {
    $scope.pagenum = 1;//每次刷新都是第一页
    $http({
	  method: 'get',
	  url: IP + 'activity',
	  params: {
		'pagenum': $scope.pagenum,//第几页
		'pagesize': $scope.pagesize//一页几条
	  }
	}).then(function successCallback(response) {
	   if(有数据){
         $scope.hasMore = true;
       }else {
         $scope.hasMore = false;//没有数据阻止上拉加载
       }
	}, function errorCallback(response) {
	  alert('请求参数错误！');
	  return false;
	}).finally(function() {
	  $scope.$broadcast('scroll.infiniteScrollComplete');//请求成功之后加载事件结束
	});
  };
  $scope.loadMore= function() {
    $scope.pagenum += 1;
    $http({
	  method: 'get',
	  url: IP + 'activity',
	  params: {
		'pagenum': $scope.pagenum,
		'pagesize': $scope.pagesize
	  }
	}).then(function successCallback(response) {
	  if(有数据){
        $scope.hasMore = true;
      }else {
        $scope.hasMore = false;//没有数据阻止上拉加载
      }
	}, function errorCallback(response) {
	  alert('请求参数错误！');
	  return false;
	}).finally(function() {
	  $scope.$broadcast('scroll.infiniteScrollComplete');//请求成功之后加载事件结束
	});
  };
}])
</script>
</head>
<body ng-app="starter" ng-controller="actionsheetCtl">
<ion-pane>
  <ion-content>
    <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>
    <ion-list>
      <ion-item ng-repeat="item in items" ng-bind="item.name"></ion-item>
    </ion-list>
    <ion-infinite-scroll ng-if='hasMore' on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>
  </ion-content>
</ion-pane>
</body>
</html>

ionic官方文档地址：http://www.ionic.wang

最后发现一个bug：页面加载就会执行一次下拉加载方法

Angular JS 上拉刷新，下拉加载

ionic 简介

ionic 特性

下拉刷新

上拉加载

相关阅读

相关文章

相关问答

相关文档