vue3移动端滑动翻页效果

前言：在对接接口时后端返回的参数内有 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
    }
  })
}