mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-24 15:39:15 +08:00
[Improvement] reduce scroll utils (#1112)
This commit is contained in:
parent
d15efd756e
commit
b5139b18eb
@ -1,33 +1,7 @@
|
|||||||
import { isServer } from './index';
|
import { isServer } from './';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
debounce(func, wait, immediate) {
|
// get nearest scroll element
|
||||||
let timeout, args, context, timestamp, result;
|
|
||||||
return function() {
|
|
||||||
context = this;
|
|
||||||
args = arguments;
|
|
||||||
timestamp = new Date();
|
|
||||||
const later = () => {
|
|
||||||
const last = (new Date()) - timestamp;
|
|
||||||
if (last < wait) {
|
|
||||||
timeout = setTimeout(later, wait - last);
|
|
||||||
} else {
|
|
||||||
timeout = null;
|
|
||||||
result = func.apply(context, args);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
if (!timeout) {
|
|
||||||
timeout = setTimeout(later, wait);
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
/* 找到最近的触发滚动事件的元素
|
|
||||||
* @param {Element} element
|
|
||||||
* @param {Element} rootElement
|
|
||||||
* @return {Element | window}
|
|
||||||
*/
|
|
||||||
getScrollEventTarget(element, rootParent = window) {
|
getScrollEventTarget(element, rootParent = window) {
|
||||||
let currentNode = element;
|
let currentNode = element;
|
||||||
// bugfix, see http://w3help.org/zh-cn/causes/SD9013 and http://stackoverflow.com/questions/17016740/onscroll-function-is-not-working-for-chrome
|
// bugfix, see http://w3help.org/zh-cn/causes/SD9013 and http://stackoverflow.com/questions/17016740/onscroll-function-is-not-working-for-chrome
|
||||||
@ -41,32 +15,15 @@ export default {
|
|||||||
return rootParent;
|
return rootParent;
|
||||||
},
|
},
|
||||||
|
|
||||||
// 判断元素是否被加入到页面节点内
|
|
||||||
isAttached(element) {
|
|
||||||
let currentNode = element.parentNode;
|
|
||||||
while (currentNode) {
|
|
||||||
if (currentNode.tagName === 'HTML') {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
if (currentNode.nodeType === 11) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
currentNode = currentNode.parentNode;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
|
|
||||||
// 获取滚动高度
|
|
||||||
getScrollTop(element) {
|
getScrollTop(element) {
|
||||||
return 'scrollTop' in element ? element.scrollTop : element.pageYOffset;
|
return 'scrollTop' in element ? element.scrollTop : element.pageYOffset;
|
||||||
},
|
},
|
||||||
|
|
||||||
// 设置滚动高度
|
|
||||||
setScrollTop(element, value) {
|
setScrollTop(element, value) {
|
||||||
'scrollTop' in element ? element.scrollTop = value : element.scrollTo(element.scrollX, value);
|
'scrollTop' in element ? element.scrollTop = value : element.scrollTo(element.scrollX, value);
|
||||||
},
|
},
|
||||||
|
|
||||||
// 获取元素距离顶部高度
|
// get distance from element top to page top
|
||||||
getElementTop(element) {
|
getElementTop(element) {
|
||||||
return (element === window ? 0 : element.getBoundingClientRect().top) + this.getScrollTop(window);
|
return (element === window ? 0 : element.getBoundingClientRect().top) + this.getScrollTop(window);
|
||||||
},
|
},
|
||||||
|
@ -12,7 +12,7 @@ function doBindEvent() {
|
|||||||
}
|
}
|
||||||
this.el[CONTEXT].binded = true;
|
this.el[CONTEXT].binded = true;
|
||||||
|
|
||||||
this.scrollEventListener = Utils.debounce(handleScrollEvent.bind(this), 200);
|
this.scrollEventListener = handleScrollEvent.bind(this);
|
||||||
this.scrollEventTarget = Utils.getScrollEventTarget(this.el);
|
this.scrollEventTarget = Utils.getScrollEventTarget(this.el);
|
||||||
|
|
||||||
const disabledExpr = this.el.getAttribute('waterfall-disabled');
|
const disabledExpr = this.el.getAttribute('waterfall-disabled');
|
||||||
@ -78,10 +78,8 @@ function handleScrollEvent() {
|
|||||||
function startBind(el) {
|
function startBind(el) {
|
||||||
const context = el[CONTEXT];
|
const context = el[CONTEXT];
|
||||||
|
|
||||||
context.vm.$nextTick(function() {
|
context.vm.$nextTick(() => {
|
||||||
if (Utils.isAttached(el)) {
|
|
||||||
doBindEvent.call(el[CONTEXT]);
|
doBindEvent.call(el[CONTEXT]);
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user