效果:滚动条触底加载下一页
元素:
<ul class="list" id="list" @scroll="myscroll"
:style="{'overflow-y':(tableData.length <= pageSize-1 ? 'hidden' : 'scroll')}"
></ul>
<p v-if="loading" style="text-align:center;font-size:10px">正在加载</p>
<p v-if="nomore" style="text-align:center;font-size:10px">没有更多</p>
数据:
data(){
return {
loading: false,
nomore: false,
tableData: [],
}
}
方法:
// 无线滚动对应的方法
myscroll() {
const _this = this;
var domHeight = document.getElementById("list").offsetHeight; //元素的高度
var scrollTop = parseInt(document.getElementById("list").scrollTop); //元素滚动的高度
var scrollHeight = document.getElementById("list").scrollHeight; //为内容可视区域的高度加上溢出(滚动)的距离
// console.log(scrollHeight,scrollTop,domHeight)
// console.log(domHeight)
if (scrollHeight - (scrollTop + 20) <= domHeight) {
_this.loading = true;
setTimeout(() => {
_this.pageNum++;
// getPageByYearpageNum,startDate,endDate,pageSize
_this.getPage(_this.pageNum);
}, 1000);
}
},
//获取分页数据的方法
getPage(pageNum) {
const _this = this;
if (this.yearor == 0) {
//table
requestObj.default
.getConn("hazardInfoController/getHazardByPage", {
timeState: this.timeState,
securityType: "01",
pageNum: pageNum,
pageSize: this.pageSize
})
.then(res => {
_this.loading = false;
if (res.msg == "查询成功!" && res.data != null) {
_this.display = [];
// console.log(res.data.data)
_this.tableData = _this.tableData.concat(res.data.data);
if (res.data.data.length == 0) {
_this.loading = false;
_this.nomore = true;
setTimeout(() => {
_this.nomore = false;
console.log("nomore")
},1000)
} else {
_this.nomore = false;
}
// console.log( _this.tableData)
for (let i = 0; i < _this.tableData.length; i++) {
_this.display.push({ display: false });
_this.display1.push({ display1: false });
}
}
// _this.busy = true
});
}
if (this.yearor == 1) {
requestObj.default
.getConn("hazardInfoController/getHazardByPage", {
startDate: _this.startTime,
endDate: _this.endTime,
securityType: "01",
pageNum: pageNum,
pageSize: _this.pageSize
})
.then(res => {
_this.loading = false;
if (res.msg == "查询成功!" && res.data != null) {
_this.display = [];
if (res.data.data.length == 0) {
_this.loading = false;
_this.nomore = true;
setTimeout(() => {
_this.nomore = false;
},1000)
} else {
_this.nomore = false;
_this.tableData = _this.tableData.concat(res.data.data);
}
// console.log(res.data.data)
for (let i = 0; i < _this.tableData.length; i++) {
_this.display.push({ display: false });
_this.display1.push({ display1: false });
}
}
});
}
},
实现思路:
<template>
<div @scroll="myscroll" id="demo" style="height:200px;overflow-y:auto;width:200px;">
<span
style="padding 20px 0px;display:block;"
v-for="(item,index) in list"
:key="index"
>{
{item.text}}</span>
<p v-if="loading">正在加载</p>
<p v-if="nomore">没有更多</p>
</div>
</template>
<script>
export default {
data() {
return {
loading: false,
page: 0,
nomore:false,
list: [
{
text: "hahaha",
},
{
text: "hahaha",
},
{
text: "hahaha",
},
{
text: "hahaha",
},
{
text: "hahaha",
},
{
text: "hahaha",
},
{
text: "hahaha",
},
{
text: "hahaha",
},
{
text: "hahaha",
},
{
text: "hahaha",
},
{
text: "hahaha",
},
{
text: "hahaha",
},
{
text: "hahaha",
},
{
text: "hahaha",
},
],
};
},
mounted() {
console.log();
},
methods: {
myscroll() {
const _this = this;
var domHeight = document.getElementById("demo").offsetHeight; //元素的高度
var scrollTop = parseInt(document.getElementById("demo").scrollTop); //元素滚动的高度
var scrollHeight = document.getElementById("demo").scrollHeight; //为内容可视区域的高度加上溢出(滚动)的距离
if (scrollHeight - scrollTop <= domHeight) {
_this.loading = true;
setTimeout(() => {
this.page++;
console.log(this.page)
for (let i = 0; i < 10; i++) {
this.list.push({
text: "cjdcj" + i,
});
}
}, 1000);
}
},
},
};
</script>
<style>
</style>