<template>
<!-- 这个最外层的没有设置高度 -->
<div>
<!-- 这是页面的头部，有高度，红色背景 -->
<div style="height: 100px; width: 100%; background-color: red;">
哈哈
</div>
<!-- 这个DIV就设置高度100vh -->
<div style="height: 100vh;">
<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
<li v-for="item in list">{{ item }}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
loading: false,
list: [],
}
},
mounted(){
this.loadMore();
},
methods: {
loadMore() {
let last = this.list[this.list.length - 1] || 1;
for (let i = 1; i <= 10; i++) {
this.list.push(last + i);
}
}
}
}
</script>
