简单的布局
<div id="app" class="container">
<div class="block" v-for="(item, index) in blocks" :key="index">
{{item}}
</div>
</div>
js需要先引入vue
<script src="https://cdn.jsdelivr/npm/vue"></script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
blocks: [1, 2, 3, 4]
},
created() {
window.onload = _ => {
const container = document.getElementById('app');
console.log(container);
container.addEventListener('scroll', e => {
const {scrollTop:upOverHeight,clientHeight,scrollHeight:allHeight}=container;
if(upOverHeight+clientHeight+10>allHeight){
console.log('滚动到底')
this.blocks.push(Math.random())
this.blocks.push(Math.random())
this.blocks.push(Math.random())
}
console.warn(container.scrollHeight,container.clientHeight, container.scrollTop);
});
};
}
});
样式
#app {
background-color: #fafafa;
width: 100px;
height: 500px;
overflow: auto;
}
.block {
background-color: white;
width: 80px;
line-height: 200px;
height: 200px;
margin: 10px;
text-align: center;
}
更多推荐
原生js实现触底加载下一页
发布评论