在日常项目开发中我们经常见到下拉刷新上拉加载的功能,接下来通过本文给大家介绍 ionic 如何实现下拉刷新与上拉加载的相关资料, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
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 如何实现下拉刷新与上拉加载的相关内容就给大家介绍完了
来源: http://www.phperz.com/article/17/0301/265168.html