Skip to content

Commit

Permalink
update 1.0.2
Browse files Browse the repository at this point in the history 
增加isUseBodyScroll配置，使用body的scroll事件来实现上拉，在特殊场景下有用
增加dampRateBegin配置，设置下拉小于offset时的阻尼系数
  • Loading branch information
@dailc
dailc committed Sep 7, 2017
1 parent 7bd2e7f commit 3736839
Show file tree
Hide file tree
Showing 24 changed files with 331 additions and 150 deletions.
2 changes: 1 addition & 1 deletion LICENSE
View file
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2017 Lichun Dai
Copyright (c) 2017 minirefresh

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
9 changes: 9 additions & 0 deletions dist/debug/minirefresh.css
View file
Expand Up @@ -45,6 +45,15 @@
z-index: 1;
}

/**
* 如果开启了body监听scroll，需要将position都设置为releative
* 否则监听不到
*/

.body-scroll-wrap {
position: relative;
}


/**
* 硬件加速样式，
Expand Down
113 changes: 76 additions & 37 deletions dist/debug/minirefresh.js
View file
Expand Up @@ -197,6 +197,23 @@

return element;
};

/**
* 获取DOM的可视区高度，兼容PC上的body高度获取
* 因为在通过body获取时，在PC上会有CSS1Compat形式，所以需要兼容
* @param {HTMLElement} dom 需要获取可视区高度的dom,对body对象有特殊的兼容方案
* @return {Number} 返回最终的高度
*/
exports.getClientHeightByDom = function(dom) {
var height = dom.clientHeight;

if (dom === document.body && document.compatMode === 'CSS1Compat') {
// PC上body的可视区的特殊处理
height = document.documentElement.clientHeight;
}

return height;
};

/**
* 设置一个Util对象下的命名空间
Expand Down Expand Up @@ -266,29 +283,27 @@
var MiniScroll = function(minirefresh) {
this.minirefresh = minirefresh;
this.container = minirefresh.container;
this.contentWrap = minirefresh.contentWrap;
this.scrollWrap = minirefresh.scrollWrap;
this.options = minirefresh.options;
// 默认没有事件，需要主动绑定
this.events = {};
// 默认没有hook
this.hooks = {};

// 锁定上拉和下拉,core内如果想改变，需要通过API调用设置
this.isLockDown = false;
this.isLockUp = false;

// 是否使用了scrollto功能，使用这个功能时会禁止操作
this.isScrollTo = false;
// 上拉和下拉的状态
this.upLoading = false;
this.downLoading = false;

// 锁定上拉和下拉
this.isLockDown = false;
this.isLockUp = false;
// 默认up是没有finish的
this.isFinishUp = false;

// 判断是否有down和up决定初始化时是否锁定
!this.options.down && (this.isLockDown = true);
!this.options.up && (this.isLockUp = true);

this._initPullDown();
this._initPullUp();

Expand Down Expand Up @@ -320,7 +335,7 @@
* @param {Number} y 移动的高度
* @param {Number} duration 过渡时间
*/
MiniScroll.prototype.translateScrollWrap = function(y, duration) {
MiniScroll.prototype.translateContentWrap = function(y, duration) {
this._translate(y, duration);
this.downHight = y;
};
Expand All @@ -333,12 +348,12 @@
MiniScroll.prototype._translate = function(y, duration) {
if (!this.options.down.isScrollCssTranslate) {
// 只有允许动画时才会scroll也translate,否则只会改变downHeight
return ;
return;
}
y = y || 0;
duration = duration || 0;

var wrap = this.scrollWrap;
var wrap = this.contentWrap;

wrap.style.webkitTransitionDuration = duration + 'ms';
wrap.style.transitionDuration = duration + 'ms';
Expand Down Expand Up @@ -407,7 +422,7 @@
// 如果锁定横向滑动并且横向滑动更多，阻止默认事件
if (options.isLockX && Math.abs(moveX) > Math.abs(moveY)) {
e.preventDefault();

return;
}

Expand All @@ -423,21 +438,25 @@
self.downHight = 0;
}

var downOffset = options.down.offset;
var downOffset = options.down.offset,
dampRate = 1;

if (self.downHight < downOffset) {
// 下拉距离 < 指定距离
self.downHight += diff;
dampRate = options.down.dampRateBegin;
} else {
// 超出了指定距离，随时可以刷新
if (diff > 0) {
// 需要加上阻尼系数
self.downHight += diff * options.down.dampRate;
} else {
// 向上收回高度,则向上滑多少收多少高度
self.downHight += diff;
}
dampRate = options.down.dampRate;
}

if (diff > 0) {
// 需要加上阻尼系数
self.downHight += diff * dampRate;
} else {
// 向上收回高度,则向上滑多少收多少高度
self.downHight += diff;
}

self.events[EVENT_PULL] && self.events[EVENT_PULL](self.downHight, downOffset);
// 执行动画
self._translate(self.downHight);
Expand Down Expand Up @@ -490,10 +509,13 @@
var self = this,
scrollWrap = this.scrollWrap;

scrollWrap.addEventListener('scroll', function() {
// 如果是Body上的滑动，需要监听window的scroll
var targetScrollDom = scrollWrap === document.body ? window : scrollWrap;

targetScrollDom.addEventListener('scroll', function() {
var scrollTop = scrollWrap.scrollTop,
scrollHeight = scrollWrap.scrollHeight,
clientHeight = scrollWrap.clientHeight,
clientHeight = innerUtil.getClientHeightByDom(scrollWrap),
options = self.options;

self.events[EVENT_SCROLL] && self.events[EVENT_SCROLL](scrollTop);
Expand All @@ -518,7 +540,7 @@

setTimeout(function() {
// 在下一个循环中运行
if (!self.isLockUp && options.up.loadFull.isEnable && scrollWrap.scrollHeight <= scrollWrap.clientHeight) {
if (!self.isLockUp && options.up.loadFull.isEnable && scrollWrap.scrollHeight <= innerUtil.getClientHeightByDom(scrollWrap)) {
self.triggerUpLoading();
}
}, options.up.loadFull.delay || 0);
Expand Down Expand Up @@ -592,7 +614,7 @@
duration = duration || 0;

// 最大可滚动的y
var maxY = scrollWrap.scrollHeight - scrollWrap.clientHeight;
var maxY = scrollWrap.scrollHeight - innerUtil.getClientHeightByDom(scrollWrap);

y = Math.max(y, 0);
y = Math.min(y, maxY);
Expand Down Expand Up @@ -734,6 +756,8 @@
isScrollCssTranslate: true,
// 下拉要大于多少长度后再下拉刷新
offset: 75,
// 阻尼系数，下拉小于offset时的阻尼系数，值越接近0,高度变化越小,表现为越往下越难拉
dampRateBegin: 1,
// 阻尼系数，下拉的距离大于offset时,改变下拉区域高度比例;值越接近0,高度变化越小,表现为越往下越难拉
dampRate: 0.3,
// 回弹动画时间
Expand Down Expand Up @@ -771,7 +795,10 @@
// 容器
container: '#minirefresh',
// 是否锁定横向滑动，如果锁定则原生滚动条无法滑动
isLockX: true
isLockX: true,
// 是否使用body对象的scroll而不是minirefresh-scroll对象的scroll
// 开启后一个页面只能有一个下拉刷新，否则会有冲突
isUseBodyScroll: false
};

var MiniRefreshCore = innerUtil.Clazz.extend({
Expand All @@ -784,18 +811,22 @@
options = innerUtil.extend(true, {}, defaultSetting, options);

this.container = innerUtil.selector(options.container);
// scroll的dom-wrapper下的第一个节点
this.scrollWrap = this.container.children[0];
// scroll的dom-wrapper下的第一个节点，作用是down动画时的操作
this.contentWrap = this.container.children[0];
// 默认和contentWrap一致，但是为了兼容body的滚动，拆分为两个对象方便处理
// 如果是使用body的情况，scrollWrap恒为body
this.scrollWrap = options.isUseBodyScroll ? document.body : this.contentWrap;

this.options = options;

// 初始化的hook
this._initHook && this._initHook(this.options.down.isLock, this.options.up.isLock);

// 生成一个Scroll对象 ，对象内部处理滑动监听
this.scroller = new innerUtil.Scroll(this);

this._initEvent();

// 初始化的hook
this._initHook && this._initHook(this.scroller.isLockDown, this.scroller.isLockUp);

// 如果初始化时锁定了，需要触发锁定，避免没有锁定时解锁（会触发逻辑bug）
options.up.isLock && this._lockUpLoading(options.up.isLock);
options.down.isLock && this._lockDownLoading(options.down.isLock);
Expand Down Expand Up @@ -998,6 +1029,7 @@
/**
* 一些默认提供的CSS类，一般来说不会变动（由框架提供的）
* THEME 字段会根据不同的主题有不同值
* 在使用body的scroll时，需要加上样式 CLASS_BODY_SCROLL_WRAP
*/
var CLASS_THEME = 'minirefresh-theme-default';
var CLASS_DOWN_WRAP = 'minirefresh-downwrap';
Expand All @@ -1008,6 +1040,7 @@
var CLASS_ROTATE = 'minirefresh-rotate';
var CLASS_HARDWARE_SPEEDUP = 'minirefresh-hardware-speedup';
var CLASS_HIDDEN = 'minirefresh-hidden';
var CLASS_BODY_SCROLL_WRAP = 'body-scroll-wrap';

/**
* 本主题的特色样式
Expand Down Expand Up @@ -1062,11 +1095,17 @@
},
_initHook: function(isLockDown, isLockUp) {
var container = this.container,
scrollWrap = this.scrollWrap;
contentWrap = this.contentWrap;

container.classList.add(CLASS_THEME);
// 加上硬件加速让动画更流畅
scrollWrap.classList.add(CLASS_HARDWARE_SPEEDUP);
contentWrap.classList.add(CLASS_HARDWARE_SPEEDUP);

if (this.options.isUseBodyScroll) {
// 如果使用了body的scroll，需要增加对应的样式，否则默认的absolute无法被监听到
container.classList.add(CLASS_BODY_SCROLL_WRAP);
contentWrap.classList.add(CLASS_BODY_SCROLL_WRAP);
}

this._initDownWrap();
this._initUpWrap();
Expand All @@ -1092,15 +1131,15 @@
},
_initDownWrap: function() {
var container = this.container,
scrollWrap = this.scrollWrap,
contentWrap = this.contentWrap,
options = this.options;

// 下拉的区域
var downWrap = document.createElement('div');

downWrap.className = CLASS_DOWN_WRAP + ' ' + CLASS_HARDWARE_SPEEDUP;
downWrap.innerHTML = '<div class="downwrap-content"><p class="downwrap-progress"></p><p class="downwrap-tips">' + options.down.contentdown + ' </p></div>';
container.insertBefore(downWrap, scrollWrap);
container.insertBefore(downWrap, contentWrap);

this.downWrap = downWrap;
this.downWrapProgress = this.downWrap.querySelector('.downwrap-progress');
Expand All @@ -1125,7 +1164,7 @@
},

_initUpWrap: function() {
var scrollWrap = this.scrollWrap,
var contentWrap = this.contentWrap,
options = this.options;

// 上拉区域
Expand All @@ -1134,7 +1173,7 @@
upWrap.className = CLASS_UP_WRAP + ' ' + CLASS_HARDWARE_SPEEDUP;
upWrap.innerHTML = '<p class="upwrap-progress"></p><p class="upwrap-tips">' + options.up.contentdown + '</p>';
upWrap.style.visibility = 'hidden';
scrollWrap.appendChild(upWrap);
contentWrap.appendChild(upWrap);

this.upWrap = upWrap;
this.upWrapProgress = this.upWrap.querySelector('.upwrap-progress');
Expand Down Expand Up @@ -1213,7 +1252,7 @@
}
},
_downLoaingHook: function() {
// 默认和scrollwrap的同步
// 默认和contentWrap的同步
this._transformDownWrap(-this.downWrapHeight + this.options.down.offset, this.options.down.bounceTime);
this.downWrapTips.innerText = this.options.down.contentrefresh;
this.downWrapProgress.classList.add(CLASS_ROTATE);
Expand Down
4 changes: 2 additions & 2 deletions dist/debug/themes/applet/minirefresh.theme.applet.js
View file
Expand Up @@ -50,14 +50,14 @@
*/
_initDownWrap: function() {
var container = this.container,
scrollWrap = this.scrollWrap;
contentWrap = this.contentWrap;

// 下拉的区域
var downWrap = document.createElement('div');

downWrap.className = CLASS_DOWN_WRAP + ' ' + CLASS_HARDWARE_SPEEDUP;
downWrap.innerHTML = '<div class="downwrap-content ball-beat"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>';
container.insertBefore(downWrap, scrollWrap);
container.insertBefore(downWrap, contentWrap);

// 由于直接继承的default，所以其实已经有default主题了，这里再加上本主题样式
container.classList.add(CLASS_THEME);
Expand Down
16 changes: 8 additions & 8 deletions dist/debug/themes/taobao/minirefresh.theme.taobao.js
View file
Expand Up @@ -79,7 +79,7 @@
*/
_initDownWrap: function() {
var container = this.container,
scrollWrap = this.scrollWrap,
contentWrap = this.contentWrap,
options = this.options;

// 下拉的区域
Expand All @@ -94,7 +94,7 @@
options.down.contentdown +
'</p>' +
'</div>';
container.insertBefore(downWrap, scrollWrap);
container.insertBefore(downWrap, contentWrap);

// 由于直接继承的default，所以其实已经有default主题了，这里再加上本主题样式
container.classList.add(CLASS_THEME);
Expand Down Expand Up @@ -194,7 +194,7 @@
_downLoaingHook: function() {
this.downWrapTips.innerText = this.options.down.contentrefresh;
this.downWrapProgress.classList.add(CLASS_ROTATE);
// 默认和scrollwrap的同步
// 默认和contentWrap的同步
this._transformDownWrap(-this.downWrapHeight + this.options.down.offset, this.options.down.bounceTime);
},

Expand All @@ -212,7 +212,7 @@
_downLoaingEndHook: function(isSuccess) {
this.downWrapTips.innerText = this.options.down.contentdown;
this.downWrapProgress.classList.remove(CLASS_ROTATE);
// 默认和scrollwrap的同步
// 默认和contentWrap的同步
this._transformDownWrap(-this.downWrapHeight, this.options.down.bounceTime);
// 需要重置回来
this.pullState = STATE_PULL_DEFAULT;
Expand All @@ -222,7 +222,7 @@
* 取消loading的回调
*/
_cancelLoaingHook: function() {
// 默认和scrollwrap的同步
// 默认和contentWrap的同步
this._transformDownWrap(-this.downWrapHeight, this.options.down.bounceTime);
this.pullState = STATE_PULL_DEFAULT;
},
Expand Down Expand Up @@ -255,8 +255,8 @@

this.downWrapTips.classList.add(CLASS_HIDDEN);
// 动画
this.scroller.translateScrollWrap(this.scrollWrap.clientHeight, downBounceTime);
this._transformDownWrap(this.scrollWrap.clientHeight - this.downWrapHeight, downBounceTime);
this.scroller.translateContentWrap(this.contentWrap.clientHeight, downBounceTime);
this._transformDownWrap(this.contentWrap.clientHeight - this.downWrapHeight, downBounceTime);
this._secretGardenAnimation(true);
inSecretGardenCb && inSecretGardenCb();
},
Expand All @@ -268,7 +268,7 @@
var downBounceTime = this.options.down.bounceTime;

// 重置scroll
this.scroller.translateScrollWrap(0, downBounceTime);
this.scroller.translateContentWrap(0, downBounceTime);
// 重置动画区域的wrap
this._transformDownWrap(-1 * this.downWrapHeight, downBounceTime);
this._secretGardenAnimation(false);
Expand Down

0 comments on commit 3736839

Please sign in to comment.