根据项目需求,实现类似微信下滑加载历史记录,vant组件库是上拉加载,所以自己百度并实现下滑加载,主要监听滚动事件。
因为项目有pc及移动,所以移动和pc要分开监听
pc端:
if (document. ) {
//firefox
document.addEventListener("DOMMouseScroll", this.onRefresh, false);
}
//滚动滑轮触发scrollFunc方法 //ie 谷歌
window.onmousewheel = document.onmousewheel = this.onRefresh;
移动端:
// 移动端监听
document.addEventListener("touchmove", this.onRefresh);
document.addEventListener("touchend", this.endHandler);
// 监听惯性滚动
endHandler() {
this.timer && clearTimeout(this.timer);
let initScroll = this.$refs.main.scrollTop
this.timer = setTimeout(() => {
var scrollTop = this.$refs.main.scrollTop
if (scrollTop < 200 && initScroll > scrollTop) {
this.timer1 = setInterval(() => {
if (scrollTop <= 0) {
this.onRefresh();
this.timer1 && clearInterval(this.timer1);
return;
}
scrollTop -= 200;
this.$refs.main.scrollTop = scrollTop;
},100);
}
},300);
},
// 滚动到顶部刷新
onRefresh() {
if (
(this.$refs.main.scrollTop == 0 || this.$refs.main.scrollTop < 0) &&
this.msgList.length < this.total &&
!this.slock
) {
this.slock = true;
this.oldScollTop = this.$refs.main.scrollHeight;
this.isLoading = true;
this.getChatDetail("before");
}
},