Ionic如何实现下拉刷新与上拉加载功能
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信息显示的开关(这些都可以不用注意)!
相关推荐
绿豆饼 2020-07-28
半纸药笺 2020-07-26
半纸药笺 2020-06-14
芯果科技蔡彦 2020-04-30
芯果科技蔡彦 2020-04-14
kfq00 2020-04-10
samllcat 2020-03-27
ZillahV0 2016-08-27
半纸药笺 2019-11-18
qixiang0 2015-04-24
shichong 2015-05-14
庆华 2015-12-26
genglang 2016-05-01
琪凡睿 2016-04-28
GoDotDotDot 2018-12-12
WarmPure 2018-10-02
青 2017-09-19
GoDotDotDot 2017-07-21