一个多月没有写博客了,实在是太忙了,因为一直在赶项目,做一个基于swoole的服务器之间的异步通信和文件传输的服务和API,搞得真的辛苦啊,最终搞定了,测试的整个性能还是不错的,整个过程收获很大,有时间在整理一下关于swoole这方面的知识
。
然而下面说的还是关于ionic的移动混合框架的知识
在原生的ionic方法中实现的下拉刷新功能中,基本功能都已经实现了,但是为了实现更好的用户体验,比如在下拉刷新成功的时候,一般都会显示一个绿色圆形打钩的icon,表示想、刷新成功,但是在我们的实际上,这个图标是没有的颜色的,默认是灰色的,给人的感觉总是觉得不是那么直接,缺乏一种视觉感,所以下面将简单地修改一下ionic.bundle.js的原生代码,实现一个友好体验视觉感的下拉刷新功能。
<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这个控制器,代码如下:
if (!isDefined($attrs.refreshingIconColor)) {
$attrs.$set('refreshingIconColor', 'none');
}
if (!isDefined($attrs.refreshingIconColor)) {
$attrs.$set('pullingIconColor', 'none');
}
同时还的添加
pullingIconColor: '@',
disablePullingRotation: '@',
代表获取指令属性内的值
至此整个修改过程就完成了
。
然而下面说的还是关于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>
至此整个修改过程就完成了