Ionic ion-refresher ion-infinite-scroll 自定义loading动画

原创 2016年08月29日 17:43:29

在ionic.bundle.js中,有两个我也不知道叫什么的东西,分别是:
1.下拉刷新

.directive('ionRefresher', [function() {
  return {
    restrict: 'E',
    replace: true,
    require: ['?^$ionicScroll', 'ionRefresher'],
    controller: '$ionicRefresher',
    template:
    '<div class="scroll-refresher invisible" collection-repeat-ignore>' +
      '<div class="ionic-refresher-content" ' +
      'ng-class="{\'ionic-refresher-with-text\': pullingText || refreshingText}">' +
        '<div class="icon-pulling" ng-class="{\'pulling-rotation-disabled\':disablePullingRotation}">' +
          '<i class="icon {{pullingIcon}}"></i>' +
        '</div>' +
        '<div class="text-pulling" ng-bind-html="pullingText"></div>' +
        '<div class="icon-refreshing">' +
          '<ion-spinner ng-if="showSpinner" icon="{{spinner}}"></ion-spinner>' +
          '<i ng-if="showIcon" class="icon {{refreshingIcon}}"></i>' +
        '</div>' +
        '<div class="text-refreshing" ng-bind-html="refreshingText"></div>' +
      '</div>' +
    '</div>',
    link: function($scope, $element, $attrs, ctrls) {

      // JS Scrolling uses the scroll controller
      var scrollCtrl = ctrls[0],
          refresherCtrl = ctrls[1];
      if (!scrollCtrl || scrollCtrl.isNative()) {
        // Kick off native scrolling
        refresherCtrl.init();
      } else {
        $element[0].classList.add('js-scrolling');
        scrollCtrl._setRefresher(
          $scope,
          $element[0],
          refresherCtrl.getRefresherDomMethods()
        );

        $scope.$on('scroll.refreshComplete', function() {
          $scope.$evalAsync(function() {
            scrollCtrl.scrollView.finishPullToRefresh();
          });
        });
      }

    }
  };
}]);

2.上拉加载更多

.directive('ionInfiniteScroll', ['$timeout', function($timeout) {
  return {
    restrict: 'E',
    require: ['?^$ionicScroll', 'ionInfiniteScroll'],
    template: function($element, $attrs) {
      if ($attrs.icon) return '<i class="icon {{icon()}} icon-refreshing {{scrollingType}}"></i>';
      return '<ion-spinner icon="{{spinner()}}"></ion-spinner>';
    },
    scope: true,
    controller: '$ionInfiniteScroll',
    link: function($scope, $element, $attrs, ctrls) {
      var infiniteScrollCtrl = ctrls[1];
      var scrollCtrl = infiniteScrollCtrl.scrollCtrl = ctrls[0];
      var jsScrolling = infiniteScrollCtrl.jsScrolling = !scrollCtrl.isNative();

      // if this view is not beneath a scrollCtrl, it can't be injected, proceed w/ native scrolling
      if (jsScrolling) {
        infiniteScrollCtrl.scrollView = scrollCtrl.scrollView;
        $scope.scrollingType = 'js-scrolling';
        //bind to JS scroll events
        scrollCtrl.$element.on('scroll', infiniteScrollCtrl.checkBounds);
      } else {
        // grabbing the scrollable element, to determine dimensions, and current scroll pos
        var scrollEl = ionic.DomUtil.getParentOrSelfWithClass($element[0].parentNode, 'overflow-scroll');
        infiniteScrollCtrl.scrollEl = scrollEl;
        // if there's no scroll controller, and no overflow scroll div, infinite scroll wont work
        if (!scrollEl) {
          throw 'Infinite scroll must be used inside a scrollable div';
        }
        //bind to native scroll events
        infiniteScrollCtrl.scrollEl.addEventListener('scroll', infiniteScrollCtrl.checkBounds);
      }

      // Optionally check bounds on start after scrollView is fully rendered
      var doImmediateCheck = isDefined($attrs.immediateCheck) ? $scope.$eval($attrs.immediateCheck) : true;
      if (doImmediateCheck) {
        $timeout(function() { infiniteScrollCtrl.checkBounds(); });
      }
    }
  };
}]);

以上两段代码,template即为加载中时显示的样式,修改之即可。
我这里只是简单的修改了下,将其改为:
下拉刷新:

template:
    '<div class="scroll-refresher invisible" collection-repeat-ignore style="text-align:center;">' +
                            '<img src="./img/ui_three/is-loading.gif"></img>'+
    '</div>',

上拉加载更多

template: function($element, $attrs) {
      **return '<ion-spinner icon="{{spinner()}}"></ion-spinner>';**
    },

对phonegap了解的不是很深入,只是碰到了找了下解决办法呦。

vue muit-ui infinite-scroll源码解析

infinite scroll基本使用vue的mint-ui的infinite scroll的基本使用地址:infinite-scroll接入指南. 简单解释一下: 1、指令接受的method:处...
  • u010014658
  • u010014658
  • 2017年05月22日 19:24
  • 4316

ionic 上拉刷新 ion-infinite-scroll 自动调用多次问题解决

这个问题查了很久,终于明白如何在上拉时为什么会自动调用多次 在第一次自动调用时,如果加载的数据没有充满屏幕,会自动再调用一次,要是还没充满屏幕,会无限次请求数据,官方里面也没说明这个东西,被坑了好长时...
  • chenhua4088
  • chenhua4088
  • 2015年11月19日 16:21
  • 14914

ionic入门教程第十课-接着说说ion-slide-box和它的注意事项、slide-tabs

本节课紧跟上节课的内容,没看过的朋友可以先看一下上节课。http://blog.csdn.net/onil_chen/article/details/51180884 太多的前言我就不写了,直接开始正...
  • onil_chen
  • onil_chen
  • 2016年04月19日 16:37
  • 6565

ionic-下拉刷新的视觉友好交互小tips

一个多月没有写博客了,实在是太忙了,因为一直在赶项目,做一个基于swoole的服务器之间的异步通信和文件传输的服务和API,搞得真的辛苦啊,最终搞定了,测试的整个性能还是不错的,整个过程收获很大,有时...
  • u012979009
  • u012979009
  • 2016年11月14日 14:09
  • 1561

ionic入门教程第十一课-简要说明ion-list、ion-item完成列表页ion-infinite-scroll上拉加载ion-refresher下拉刷新

ionic入门教程第十一课-简要说明ion-list、ion-item完成列表页ion-infinite-scroll上拉加载ion-refresher下拉刷新...
  • huwei2003
  • huwei2003
  • 2016年08月22日 16:03
  • 666

使用ionic框架的<ion-scroll>进行水平滚动时,导致页面难以上下滑动的解决方案

但是我们项目中遇到一个问题:一个页面很大,有多个画廊控件,我们的页面很难上下滑动,滑动非常吃力,这是为什么呢?举个例子:如果你的页面放的全都是input输入控件,那么这个页面一样很难滑动,因为当我们在...
  • aitangyong
  • aitangyong
  • 2016年03月17日 11:35
  • 15394

ionic 加载动作$ionicLoading 和加载动画 ion-spinner

一、ion-spinner使用 ionSpinner 提供了许多种旋转加载的动画图标。当你的界面加载时,你就可以呈现给用户相应的加载图标。 该图标采用的是SVG。 ...
  • u011127019
  • u011127019
  • 2017年02月10日 16:12
  • 2845

ionic配合ion-nav-bar的导航右侧按钮指令

  • 2017年07月07日 12:47
  • 1KB
  • 下载

ionic列表 ion-list 以及高性能的ng-repeat

  • 2015年12月12日 09:54
  • 319KB
  • 下载

ionic组件ion-tabs(选项卡)实例

ion-tabs是ionic中的选项卡组件,路由使用的是angular-ui-router.js。因此必须先掌握uiRoute。...
  • u011554735
  • u011554735
  • 2016年04月04日 23:03
  • 2081
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ionic ion-refresher ion-infinite-scroll 自定义loading动画
举报原因:
原因补充:

(最多只允许输入30个字)