vue实现聊天记录向上加载上一页

需求：模仿PC企业微信聊天记录，实现向上滚动加载上一页，触底加载下一页，并处理滚动条位置

1、监听盒子滚动事件（盒子id：historyList）

	//这里我在数据请求回来后处理
		this.$nextTick(() => {
				//拿DOM元素
                this.hisListEle = document.getElementById("historyList"); 
                
                //添加滚动条监听事件
                this.hisListEle.addEventListener("scroll", this.handlerMsgInfoScroll);
                
                //拿到当前的scrollHeight
                let heigh = document.getElementById("historyList").scrollHeight;
				
				//向上滚动的时候，需要计算要滚动到哪里
                let sroll = heigh - this.preSrollHeight;
                
                //设置滚动条位置
                this.hisListEle.scrollTo(0, sroll);
                this.preSrollHeight = heigh;
            });

2、滚动条触顶，触底事件处理

// 监听滚动条
    handlerMsgInfoScroll() {
      // 节流
      if (this.loadingState) return;

	  //触顶
      if (!this.isTopEnd && this.hisListEle.scrollTop <= 50) {
        this.topPage++;
        this.isTop = true	// 控制请求数据方向
        this.getPageData();
      }

      // 触底加载下一页，如果没有数据了，就不再发请求
      if( this.isBottomEnd) return
      if (
        this.hisListEle.scrollTop + this.hisListEle.clientHeight ===
        this.hisListEle.scrollHeight
      ) {
        this.bottomPage++;
        this.isTop = false // 控制请求数据方向
        this.getPageData();
      }

    },

3、数据请求处理

	async getPageData(){
		//如果是触顶，并且没数据了，则return
		if(this.isTopEnd && this.isTop ) return
		
		//如果是触底，并且没数据了，则return
		if(this.isBootmEnd && !this.isTop) return
		
		//请求状态，节流
		if(this.loadingState) return
		this.loadingState = true
		
		//判断当前向上还是向下加载，拿对应的页码
		let paramsData = Object.assign({}, this.paramsData);
		if(this.isTop){ paramsData.page = this.topPage}
		if(!this.isTop){ paramsData.page = this.bottomPage}
		
		//发请求获取数据
		await getData(paramsData).then(res=>{
			let arr = res.data
				
			//判断当前加载方向，新数据放前面还是放后面
			
			if(this.isTop){
				this.msgList.unshift(...newArr);
			}else{
				this.msgList.push(...arr);
			}
		})
		




	}