vue3 + ts分页实现

最新推荐文章于 2024-07-10 16:17:10 发布

菜菜的小程

最新推荐文章于 2024-07-10 16:17:10 发布

阅读量562

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_56135996/article/details/128867801

版权

该代码示例展示了如何在JavaScript（可能是Vue.js环境中）中实现分页功能。通过设置默认变量如currentPage、pageSize和totalArticleCount，以及使用ref绑定状态，当用户滚动到底部时，会调用getArticleList函数获取更多数据。接口返回的数据被处理并拼接到现有的数据列表中，同时更新总条数和判断是否需要继续加载更多页。

摘要由CSDN通过智能技术生成

// js中设置默认变量
const currentPage = ref(1) // 页数
const pageSize = 10 // 每页数量
const blogArticleList = ref(null) // 返回数据
const totalArticleCount = ref(null) // 判断是否需要分页变量
const sort = ref(null) // 接口需要传的特殊参数
const getArticleList = (blogTypeSecond) => {
  const data = {
    blogType: '10001',
    blogTypeSecond,
    pageSize,
    pageNum: currentPage.value
  }
  // 接口调用
  api.blog.queryBlog(data).then((res) => {
  // 将获取到的数据进行处理 
  // 如果数据只有1页则正常展示获取到的第一页数据 若不止一页则将第下一页获取到的数据与第一页数据进行拼接
    blogArticleList.value = res.data.records ? (currentPage.value === 1 ? res.data.records : blogArticleList.value.concat(res.data.records)) : []
    // 获取到总数据总数 进行赋值
    totalArticleCount.value = res.data.total
    // 如果每页的数量*当前页数页数 >= 返回数据的总个数 则不需要继续加载 否则页数继续++
    if (pageSize * currentPage.value >= res.data.total) {
    // 不需要继续++ 标识
      finished.value = true
    } else {
      currentPage.value++
    }
    // 处理返回的数据
    if (blogArticleList.value.length > 0) {
      blogArticleList.value.map((i) => {
        if (typeof i.blogLabel === 'string') {
          i.blogLabel = JSON.parse(String(i.blogLabel))
        }
      })
    }
  })
}

// 监听滚动事件
const onScroll = (e) => {
// e中包括所有滑动数据
// 当滑动到底部 !finished.value时 再次调用获取数据接口
    if (!finished.value && Math.round(e.target.scrollTop) + e.target.clientHeight === e.target.scrollHeight) {
      getArticleList('')
    }
  }
}