- 本地创建一个数组
- 实现上拉加载时，数组一部分一部分加载，知道没有
js部分
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
datas: [{
"page": 1,
"items": [{
"title": "1. 妊娠合并2019新型冠状病毒肺炎1例",
"name": "赵瑞红等人",
"time": "网络首发时间：2020-02-11 10:57"
}, {
"title": "2. 预防新型冠状病毒肺炎宣传手册",
"name": "石岩等人",
"time": "网络首发时间：2020-02-11 10:50；"
}, {
"title": "3. 新型冠状病毒肺炎疫情下治疗药物监测实验室的感染防控策",
"name": "周红等人，",
"time": "网络首发时间：2020-02-11 10:17；"
}]
},
{
"page": 2,
"items": [{
"title": "11. 妊娠合并2019新型冠状病毒肺炎1例",
"name": "赵瑞红等人",
"time": "网络首发时间：2020-02-11 10:57"
}, {
"title": "2. 预防新型冠状病毒肺炎宣传手册",
"name": "石岩等人",
"time": "网络首发时间：2020-02-11 10:50；"
}, {
"title": "3. 新型冠状病毒肺炎疫情下治疗药物监测实验室的感染防控策",
"name": "周红等人，",
"time": "网络首发时间：2020-02-11 10:17；"
}]
},
{
"page": 3,
"items": [{
"title": "13. 妊娠合并2019新型冠状病毒肺炎1例",
"name": "赵瑞红等人",
"time": "网络首发时间：2020-02-11 10:57"
}, {
"title": "2. 预防新型冠状病毒肺炎宣传手册",
"name": "石岩等人",
"time": "网络首发时间：2020-02-11 10:50；"
}, {
"title": "3. 新型冠状病毒肺炎疫情下治疗药物监测实验室的感染防控策",
"name": "周红等人，",
"time": "网络首发时间：2020-02-11 10:17；"
}]
}, {
"page": 4,
"items": [{
"title": "14. 妊娠合并2019新型冠状病毒肺炎1例",
"name": "赵瑞红等人",
"time": "网络首发时间：2020-02-11 10:57"
}, {
"title": "2. 预防新型冠状病毒肺炎宣传手册",
"name": "石岩等人",
"time": "网络首发时间：2020-02-11 10:50；"
}]
}
],
list: [],
listpage: 0,
logStatus: 2
},
created() {
this.list = this.datas[0]['items']
window.addEventListener('scroll', this.onScroll);
},
methods: {
onScroll() {
// 整个数据的长度
let datasLength = this.datas.length;
if (datasLength > 1) {
this.logStatus = 0
//可滚动容器的高度
let innerHeight = document.querySelector('#app').clientHeight;
//屏幕尺寸高度
let outerHeight = document.documentElement.clientHeight;
//可滚动容器超出当前窗口显示范围的高度
let scrollTop = document.documentElement.scrollTop;
//scrollTop在页面为滚动时为0，开始滚动后，慢慢增加，滚动到页面底部时，出现innerHeight < (outerHeight + scrollTop)的情况，严格来讲，是接近底部。
console.log(innerHeight + " " + outerHeight + " " + scrollTop);
if (outerHeight + scrollTop === innerHeight) {
//加载更多操作
// 新数组
let newArr = []
// 判断是否只有一组数据
for (let i = 0; i < datasLength; i++) {
if (this.listpage == i) {
this.listpage+=1
let newData = this.datas[this.listpage].items
console.log(newData)
for (let j = 0; j < newData.length; j++) {
console.log(newData[j])
this.list.push(newData[j])
}
break
}
console.log(i,this.listpage)
if(this.listpage==(datasLength-1)){
this.logStatus=2
}
}
console.log(this.list)
}
}
}
}
})
</script>
分享给大家个思路，希望对大家有些帮助；
有什么问题可以留言交流，多多提升进步，谢谢！
