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了解的不是很深入,只是碰到了找了下解决办法呦。

相关文章推荐

ionic实现上拉加载更多(组件 ion-infinite-scroll使用,以及多次加载的问题)

开发过程中需要对展示内容实现上拉加载的更多效果,本来以为实现没有什么难度,ionic本身就提供了ion-infinite-scroll组件能够完成我们的开发需要。 先上代码 ...

Ionic2实现: 下拉刷新和上拉加载

下拉刷新: 1 ion-content> 2 ion-refresher (ionRefresh)="doRefresh($event)"> 3 ion-refresher...

ionic ion-refresher刷新完毕

刷新完毕后,应当使用作用域的 $broadcast() 方法通知框架: $scope.$broadcast("scoll.refreshComplete")...

前端js之后退自动刷新

实现web页面后退后页面自动刷新

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

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

当数据加载完停止ion-infinite-scroll

html代码: ion-infinite-scroll on-infinite="appendBike()" distance="1%" immediate-check="false" ng-i...

【无限滚动加载数据】—infinite-scroll插件的使用

网上对于infinite-scroll插件使用的例子不多。但由于它的出现,鼓吹了瀑布流形式的页面展示方式,所以不得不了解了解这种新的分页方式。 官网上有对infinite-scroll的详细描述,但一...

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

发了十篇教程,现在向我问问题的朋友越来越少了。可能我接触到的学习ionic的就这么些人吧! 可能大家已经觉得我写的东西都太过基础了,没什么值得参考借鉴的地方。 开始有人叫我说直接防类似饿了吗,折八百这...

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

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

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

一、ion-spinner使用 ionSpinner 提供了许多种旋转加载的动画图标。当你的界面加载时,你就可以呈现给用户相应的加载图标。 该图标采用的是SVG。 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ionic ion-refresher ion-infinite-scroll 自定义loading动画
举报原因:
原因补充:

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