}
this.topStatus = this.translate >= this.topDistance ? 'drop' : 'pull';// drop: 到达指定的阈值,可以执行刷新操作了
}
// 上拉操作, 判断当前scroll dom是否滚动到了底部
if (this.direction === 'up') {
this.bottomReached = this.bottomReached || this.checkBottomReached();
}
if (typeof this.bottomMethod === 'function' && this.direction === 'up' &&
this.bottomReached && this.bottomStatus !== 'loading' && !this.bottomAllLoaded) {
event.preventDefault();
event.stopPropagation();
// 判断的逻辑思路同上
if (this.maxDistance > 0) {
this.translate = Math.abs(distance) <= this.maxDistance
? this.getScrollTop(this.scrollEventTarget) - this.startScrollTop + distance : this.translate;
} else {
this.translate = this.getScrollTop(this.scrollEventTarget) - this.startScrollTop + distance;
}
if (this.translate > 0) {
this.translate = 0;
}
this.bottomStatus = -this.translate >= this.bottomDistance ? 'drop' : 'pull';
}
this.$emit('translate-change', this.translate);
}
上面的代码逻辑挺简单，注释也就相对不多。
重点谈一下checkBottomReached()函数，用来判断当前scroll dom是否滚动到了底部。
checkBottomReached() {
if (this.scrollEventTarget === window) {
return document.body.scrollTop + document.documentElement.clientHeight >= document.body.scrollHeight;
} else {
return this.$el.getBoundingClientRect().bottom <= this.scrollEventTarget.getBoundingClientRect().bottom + 1;
}
}经过我的测试，上面的代码是有问题:
当scrollEventTarget是window的条件下，上面的判断是不对的。因为document.body.scrollTop总是比正常值小1，所以用于无法满足到达底部的条件；
当scrollEventTarget不是window的条件下，上面的判断条件也不需要在this.scrollEventTarget.getBoundingClientRect().bottom后面加1，但是加1也不会有太大视觉上的影响。
最后来看下moveend事件回调的处理函数
handleTouchEnd() {
if (this.direction === 'down' && this.getScrollTop(this.scrollEventTarget) === 0 && this.translate > 0) {
this.topDropped = true; // 为当前组件添加 is-dropped class(也就是添加动画处理)
if (this.topStatus === 'drop') { // 到达了loading的状态
this.translate = '50'; // top slot的高度
this.topStatus = 'loading';
this.topMethod(); // 执行回调函数
} else { // 没有到达,回调原点
this.translate = '0';
this.topStatus = 'pull';
}
}
// 处理逻辑同上
if (this.direction === 'up' && this.bottomReached && this.translate < 0) {
