pc端加载
首先创建一个嵌套盒子
<div class="outer" @scroll="onScroll">
<!-- 内层盒子 -->
<div class="subcoat">
<div v-for="(item,index) in 21" :key="index" class="main_style">{{item}}</div>
</div>
</div>
显示加载的盒子
<!-- 底层加载 -->
<div class="loading" v-show="isShow">
<!-- <img src="" alt=""> -->
加载中。。。。。
</div>
</div>
设置嵌套盒子的样式
.outer {
width: 100%;
height: 90vh;
overflow: scroll;
border: 1px solid;
text-align: center;
}
.subcoat {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.main_style {
width: 30%;
height: 40vh;
line-height: 40vh;
border-radius: 25px;
border: 1px solid grey;
margin: 10px;
}
逻辑代码
data() {
return {
isShow: false
};
},
methods: {
onScroll(e) {
// console.log(e);
// 获取可视窗口的高度
var clientHeight = e.target.clientHeight;
// console.log(clientHeight);
// 获取滚动元素的高度
var scrollHeight = e.target.scrollHeight;
// console.log(scrollHeight);
// 获取滚动元素与顶部的距离
var scrollTop = Math.floor(e.target.scrollTop);
// console.log(scrollTop);
if (scrollHeight - scrollTop - clientHeight < 2) {
this.isShow = true;
setTimeout(() => {
this.isShow = false;
}, 3000);
}
},
}
若有不足的地方,还望打架能指出 谢谢啦0.e