vue3 + ts分页实现
vue3 + ts分页实现
·
// 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
以上为简单的分页实现,请大佬多多指教!
更多推荐
已为社区贡献3条内容
所有评论(0)