前言:在对接接口时后端返回的参数内有 page(页数) pagesize(一页的数据条数),想要接口的数据不直接全部展示在页面上,实现分页展示效果减少服务器响应时间。下面使用vue3 setup来进行演示。
1.首先引入onMounted,ref等。
import { onMounted, reactive, ref } from 'vue'
2.定义一个布尔变量和 page(页数) 和pagesize(一页的数据条数)。
const flag = ref(false)
let page = ref(1)
let pagesize = ref(20)
3.获取最外层div的类名,使用滚动事件,为了适配不同手机的尺寸,在距离底部20px时就触发。
onMounted(() => {
const container = document.querySelector('.clue');
container.addEventListener('scroll', handleScroll);//调用滚动事件
});
const handleScroll = () => {
const container = document.querySelector('.clue'); //最外层div的类名
if (container.offsetHeight + container.scrollTop >= container.scrollHeight - '20') {
if (!flag.value) { // 如果标志变量为false
page.value++; // 触发page加1
flag.value = true; // 将标志变量设为true,避免再次触发
getData(0) //接口函数
}
}
}
注:若不明白container.offsetHeight + container.scrollTop >= container.scrollHeight - '20'这一行代码具体含义,附下图:
4.在接口函数中使用flag变量,为了考虑到此页面不只是翻页调这个接口,使用其他功能也调用此接口和重新刷新数据,在getData(num)中定义一个num ,为0是就是继续翻页不刷新数据,若getData(1),则page重置为1,DataList长度重置为0。
function getData(num){
if(num == 1){
page.value = 1
DataList.length = 0
}
post({
url:getdatas,//封装后的接口
data:{
...
...
page:page.value,
pagesize:pagesize.value
}
}).then(res=>{
if(!res.errcode){
DataList.push(...res.data)
}
if(res.data != ''){
flag.value = false
}
})
}
最后赋完整代码。
import { onMounted, reactive, ref } from 'vue'
const flag = ref(false)
let page = ref(1)
let pagesize = ref(20)
onMounted(() => {
const container = document.querySelector('.clue');
container.addEventListener('scroll', handleScroll);//调用滚动事件
});
const handleScroll = () => {
const container = document.querySelector('.clue'); //最外层div的类名
if (container.offsetHeight + container.scrollTop >= container.scrollHeight - '20') {
if (!flag.value) { // 如果标志变量为false
page.value++; // 触发page加1
flag.value = true; // 将标志变量设为true,避免再次触发
getData(0) //接口函数
}
}
}
function getData(num){
if(num == 1){
page.value = 1
DataList.length = 0
}
post({
url:getdatas,//封装后的接口
data:{
...
...
page:page.value,
pagesize:pagesize.value
}
}).then(res=>{
if(!res.errcode){
DataList.push(...res.data)
}
if(res.data != ''){
flag.value = false
}
})
}