element的el-scrollbar 滚动条滚动到底部加载数据

公司要求前后端分离，springboot+vue 实现前后端分离，使用前端UI框架element，可怜我只能从后端做前端的活了。其中某个页面的表格用两种形式展现：表格和列表。其中表格用的是element专门的控件(el-table)，列表形式就是自己组合的了，这时领导要求列表形式要通过滚动条来加载数据(具体可参考手机下拉刷新功能)。

言归正传，现在来实现相应的功能，主组件App.vue页面的代码如下:

通过监听App.vue的滚动条(el-scrollbar)来实现列表页的切换，然后切换到列表页list1.vue：

由于script放置上方样式发生错乱，所以单独拿出来：

export default {
		data(){
			return {
				datas:[
					{name:1},
					{name:2},
					{name:3},
					{name:4},
					{name:5}
				],
				flag:false,
			}
		},
		methods:{
			listenScrollbar:function(){
				if(this.flag){
					//scrollbar  在App.vue页面  滚动条    这个一定要找到
					console.log(this.$root.$children[0].$refs['scrollbar'].wrap.scrollTop);
	                let let1 = this.$root.$children[0].$refs['scrollbar'].wrap.scrollTop;//滚动条滚动距离
	                let let2 = this.$root.$children[0].$refs['scrollbar'].wrap.scrollHeight;//浏览器总高度
	                let let3 = document.body.scrollHeight; //浏览器可见高度
	                
	                //浏览器可见高度 + 滚动条滚动距离  ==  浏览器总高度 +17     因为模拟的滚动条 有 17px
	                if(parseInt(let1 + let3) == parseInt(let2 + 17)){
                    this.flag = false;
                    let flag = this.$loading({target:'#load',text:'加载中'})
                    setTimeout(() => {
                        for(let i = 0 ; i < 5; i++){
                            this.datas.push({name:i+Math.random(10)});
                            this.flag = true;
                        }
                        loadingInstance.close();
                    }, 1000);
                }
				}
			}
		},
		mounted() {
			//监听事件
			this.flag = true;
			window.addEventListener('scroll',this.listenScrollbar,true);	
		},
		destroyed(){
			//  删除监听事件
        	window.removeEventListener('scroll',this.listenScrollbar,true);
		}
	}

效果如下：