本人后端不精通,后端会一次性把所有数据全部返回给前端,前端需要限制数据的展示。
原理:
1.返回的所有数据存到数组booksMsg中
2.新建空数组booksmsg,用于v-for循环遍历展示
<div
class="book-container"
v-for="(book, index) in booksmsg"
:key="index"
>
......
</div>
3.写一个方法:用原生dom检测滚动条是否到达视口底部,是→把booksMsg中的5条数据push进booksmsg数组里
4.处理一些问题:
①怎么知道从第几个索引开始push→booksmsg.length
②当push的数据为空时,怎么办→用if语句,先判断要push的这5条数据是不是为空的
③当所有数据push完毕后,展示“没有更多数据了”→用布尔变量nobooks + v-show 处理
<p v-show="nobooks">没有更多内容了</p>
完整js代码:
import { mapState } from "vuex";
export default {
data() {
return {
isAchiveBottom: false, //滚动条是否到底部标志
booksmsg: [], //每次展示的图书信息
nobooks:false,//图书显示'没有更多内容了'
};
},
mounted() {
this.$store.dispatch("getBooks");
this.checkIsAchiveBottom();// 检测用户是否滑动到视口底部+每次展示5条数据
},
computed: {
...mapState({
//当使用这个计算属性时,注入一个参数state其实为仓库中的所有数据
booksMsg(state) {
return state.recommend.booksMsg;
},
}),
},
methods: {
// 检测用户是否滑动到视口底部
checkIsAchiveBottom() {
window.onscroll = () => {
//变量scrollTop是滚动条滚动时,距离顶部的距离
var scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;
//变量windowHeight是可视区的高度
var windowHeight =
document.documentElement.clientHeight || document.body.clientHeight;
//变量scrollHeight是滚动条的总高度
var scrollHeight =
document.documentElement.scrollHeight || document.body.scrollHeight;
//滚动条到底部的条件(距底部20px时触发加载)
if (
scrollTop + windowHeight >= scrollHeight - 20 &&
!this.isAchiveBottom &&
!this.noMore
) {
this.isAchiveBottom = true;
//延时触发数据加载
setTimeout(() => {
//后端需要进行分页,然后前端从后端拿来实现滚动加载
//这里利用数组push来模拟从后端拿到的数据
this.getInitial()
this.isAchiveBottom = false;
}, 500);
}
};
},
// 把后端得到的数据,每次展示5条,当每次滑动到视口底部,再放5条进数组里
getInitial() {
// 计算booksmsg已有的图书数量
let bookNumber = this.booksmsg.length;
// 再放5条新数据进数组booksmsg里
if (this.booksMsg.length == bookNumber) {
this.nobooks=true;//显示没有更多内容了
} else {
for (var i = 1; i <= 5; i++) {
// 如果实际数据的数组为空,
let every_book=this.booksMsg[bookNumber + i];
if(!every_book){
console.log(every_book);
}
else{
this.booksmsg.push(this.booksMsg[bookNumber + i]);
}
}
}
},
},
};