// 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('')
    }
  }
}

屏幕录制2023-02-03 17.07.55

以上为简单的分页实现,请大佬多多指教!

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐