Ionic如何实现下拉刷新与上拉加载功能

2019-11-20 09:48:12

字体：大中小

来源：转载

供稿：网友

IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定，使用它成为 Web 和移动开发者的共同选择。Ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。Ionic框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。

本文给大家介绍 Ioinc中怎么实现下拉刷新和上拉加载功能的。在项目开发中经常遇到此功能，感兴趣的朋友一起看看吧。

HTML部分

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

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: ,currentPage: },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‘);}, );},loadMore: function () {vm.pagination.currentPage += ;services.getMessages({perPage: vm.pagination.perPage, page: vm.pagination.currentPage}, function (data) {vm.messages = vm.messages.concat(data);if (data.length == ) {vm.moredata = true;};$scope.$broadcast(‘scroll.infiniteScrollComplete‘);})} }vm.init();})

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

关于小编给大家介绍的Ionic如何实现下拉刷新与上拉加载的相关内容就给大家介绍完了，希望对大家有所帮助，如果大家想了解更多内容敬请关注武林网网站！

上一篇：Ionic快速安装教程

下一篇：简单了解JavaScript操作XPath的一些基本方法