滚动懒加载，亲测可行

1、css代码：

1

.box{

2	width: 500px;

3	height: 500px;

4	overflow-y:auto;

5

}

2、html

1	<div class="box" ref="box">

2	<!--列表内容放在这里-->

3	<!--列表内容如果一次加载不完，一定要保证初次加载时的列表总高度超过box的高度，否则不会产生滚动条-->

4

</div>

3、js

01	mounted() {

02	let box = this.$refs.box;

03	box.addEventListener('scroll',this.handleScroll,true);

04

},

05	methods: {

06	handleScroll(e){

07	//变量scrollTop是滚动条滚动时，距离顶部的距离

08	var scrollTop = e.target.scrollTop;

09	//变量windowHeight是可视区的高度

10	var windowHeight = e.target.clientHeight;

11	//变量scrollHeight是滚动条的总高度

12	var scrollHeight = e.target.scrollHeight;

13	//滚动条到底部的条件

14	if(scrollTop + windowHeight == scrollHeight){

15	//写后台加载数据的函数

16	console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);

17

}

18

},

19

}