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

一个多月没有写博客了，实在是太忙了，因为一直在赶项目，做一个基于swoole的服务器之间的异步通信和文件传输的服务和API,搞得真的辛苦啊，最终搞定了，测试的整个性能还是不错的，整个过程收获很大，有时间在整理一下关于swoole这方面的知识
。
然而下面说的还是关于ionic的移动混合框架的知识
在原生的ionic方法中实现的下拉刷新功能中，基本功能都已经实现了，但是为了实现更好的用户体验，比如在下拉刷新成功的时候，一般都会显示一个绿色圆形打钩的icon，表示想、刷新成功，但是在我们的实际上，这个图标是没有的颜色的，默认是灰色的，给人的感觉总是觉得不是那么直接，缺乏一种视觉感，所以下面将简单地修改一下ionic.bundle.js的原生代码，实现一个友好体验视觉感的下拉刷新功能。

默认的下拉：

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

修改之后：

那么我们该如何修改呢?

(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();
          });
        });
      }

    }
  };
}]);

红色是我们添加代码

我们在'<i class="icon {{pullingIcon}}"></i>' 添加style="color:{{pullingIconColor}}"，变成
<i class="icon {{pullingIcon}}" style="color:{{pullingIconColor}}"></i>

在<i ng-if="showIcon" class="icon {{refreshingIcon}}"></i>中添加style="color:{{refreshingIconColor}}"，最终变成<i ng-if="showIcon" class="icon {{refreshingIcon}}" style="color:{{refreshingIconColor}}"></i>


(2)再找到$ionicRefresher这个控制器，代码如下：

IonicModule
.controller('$ionicRefresher', [
  '$scope',
  '$attrs',
  '$element',
  '$ionicBind',
  '$timeout',
  function($scope, $attrs, $element, $ionicBind, $timeout) {
    var self = this,
        isDragging = false,
        isOverscrolling = false,
        dragOffset = 0,
        lastOverscroll = 0,
        ptrThreshold = 60,
        activated = false,
        scrollTime = 500,
        startY = null,
        deltaY = null,
        canOverscroll = true,
        scrollParent,
        scrollChild;

    if (!isDefined($attrs.pullingIcon)) {
      $attrs.$set('pullingIcon', 'ion-android-arrow-down');
    }

    if (!isDefined($attrs.refreshingIconColor)) {
      $attrs.$set('refreshingIconColor', 'none');
    }

    if (!isDefined($attrs.refreshingIconColor)) {
      $attrs.$set('pullingIconColor', 'none');
    }

    $scope.showSpinner = !isDefined($attrs.refreshingIcon) && $attrs.spinner != 'none';

    $scope.showIcon = isDefined($attrs.refreshingIcon);

    $ionicBind($scope, $attrs, {
      pullingIcon: '@',
      pullingIconColor: '@',
      pullingText: '@',
      refreshingIcon: '@',
      refreshingIconColor: '@',
      refreshingText: '@',
      spinner: '@',
      disablePullingRotation: '@',
      $onRefresh: '&onRefresh',
      $onPulling: '&onPulling'
    });
........

添加了一下代码
if (!isDefined($attrs.refreshingIconColor)) {
      $attrs.$set('refreshingIconColor', 'none');
    }

    if (!isDefined($attrs.refreshingIconColor)) {
      $attrs.$set('pullingIconColor', 'none');
    }
同时还的添加
pullingIconColor: '@',
disablePullingRotation: '@',
代表获取指令属性内的值

那么在我们的html页面中可以这样使用

<ion-refresher pulling-text="下拉刷新..." pulling-icon-color="red" on-refresh="doRefresh()" refreshing-icon="ion-checkmark-circled" refreshing-icon-color="green" refreshing-text="成功更新20信息"></ion-refresher>

注意其中红色部分，即是设置的颜色值
至此整个修改过程就完成了