ionic refresh_refresh plus使用说明_refreshment翻译

一个多月没有写博客了，实在是太忙了，因为一直在赶项目，做一个基于swoole的服务器之间的异步通信和文件传输的服务和API,搞得真的辛苦啊，最终搞定了，测试的整个性能还是不错的，整个过程收获很大，有时间在整理一下关于swoole这方面的知识

。

然而下面说的还是关于ionic的移动混合框架的知识

在原生的ionic方法中实现的下拉刷新功能中，基本功能都已经实现了，但是为了实现更好的用户体验，比如在下拉刷新成功的时候，一般都会显示一个绿色圆形打钩的icon，表示想、刷新成功，但是在我们的实际上，这个图标是没有的颜色的，默认是灰色的，给人的感觉总是觉得不是那么直接，缺乏一种视觉感，所以下面将简单地修改一下ionic.bundle.js的原生代码，实现一个友好体验视觉感的下拉刷新功能。

默认的下拉：

可以看到显示的图标时浅灰色的。ionic refreshionic refresh

修改之后：

那么我们该如何修改呢?

(1)首先在ionic.bundle.js中，找到ionicRefresher这个指令所在地方，这个指令代码如下：

IonicModule
.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}}" style="color:{{pullingIconColor}}"></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}}" style="color:{{refreshingIconColor}}"></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();
          });
        });
      }

    }
  };
}]);

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-47765-1.html