基于 Vue3+Vant3 的网页版类掘金 App 项目 - 修复作者列表遗留问题

2023-12-09 09:29:58

大家好，在上一篇博文中，我们实现了优秀作者榜的数据加载及列表展示。大部分功能都已经实现了，但还有一些零散的问题需要优化一下。截止目前虽然列表数据已经加载出来了，但如果仔细观察会发现当向下滚动进行翻页时加载的作者列表并不完整，会出现部分作者缺失的情况。为了解决这个问题，我们需要对代码进行一些修改。

首先，我们需要在 getList() 方法中添加一个 params 参数，这个参数将包含分页信息。然后，我们需要在请求中添加分页参数，例如：

getList(params) {
  return request({
    url: '/api/authors',
    params,
  })
}

接下来，我们需要在组件中使用 getList() 方法来获取数据。当用户向下滚动页面时，我们可以使用 onScroll 事件来触发数据加载。在 onScroll 事件处理程序中，我们可以检查是否已经到达页面底部，如果已经到达页面底部，则调用 getList() 方法加载更多数据。

onScroll() {
  if (this.isLoading || this.isFinished) {
    return
  }
  const scrollTop = document.documentElement.scrollTop
  const clientHeight = document.documentElement.clientHeight
  const scrollHeight = document.documentElement.scrollHeight
  if (scrollTop + clientHeight >= scrollHeight) {
    this.isLoading = true
    this.page++
    this.getList({ page: this.page, size: 10 }).then((res) => {
      this.authors = this.authors.concat(res.data)
      this.isLoading = false
      if (res.data.length < 10) {
        this.isFinished = true
      }
    })
  }
}