项目第三天

1.头部导航栏

组件复用

2.频道列表

vant中tab标签页搭建布局

展示频道列表

• 第1步：api目录下面文件封装请求方法
• 第2步：data里面定义变量用于存储数据
• 第3步：methods里定义获取数据方法
• 3.1 页面里面导入这个方法
• 3.2 methods方法里面调用方法发送请求
• 3.3 请求错误处理
• 3.4 请求成功赋值data里面变量
• 第4步：created里面调用这个方法
• 第5步： 渲染数据

方法定义

// 导入封装方法
import { getUserChannels } from '@/api/user'

methods: {
    async loadChannels () {
      try {
        // 发请求
        const { data } = await getUserChannels()
        // 成功赋值
        this.channels = data.data.channels
      } catch (err) {
        // 失败处理
        this.$toast('获取频道数据失败')
      }
    }
  }

3.文章列表

我们想要的效果是：加载过的数据列表不要重新加载。

实现思路也非常简单，就是我们准备多个 list 数组，每个频道对应一个，查看哪个频道就把数据往哪个频道的列表数组中存放，这样的话就不会导致覆盖问题。

具体做法就是：

• 封装一个文章列表组件
• 然后在频道列表中把文章列表遍历出来

*****使用 List 列表组件

List 列表组件 (opens new window)：瀑布流滚动加载，用于展示长列表。

List 组件通过 loading 和 finished 两个变量控制加载状态， 当组件初始化或滚动到到底部时，会触发 load 事件并将 loading 设置成 true，此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。 若数据已全部加载完毕，则直接将 finished 设置成 true 即可。

• load 事件：
  • List 初始化后会触发一次 load 事件，用于加载第一屏的数据。
  • 如果一次请求加载的数据条数较少，导致列表内容无法铺满当前屏幕，List 会继续触发 load 事件，直到内容铺满屏幕或数据全部加载完成。
• loading 属性：控制加载中的 loading 状态
  • 非加载中，loading 为 false，此时会根据列表滚动位置判断是否触发 load 事件（列表内容不足一屏幕时，会直接触发）
  • 加载中，loading 为 true，表示正在发送异步请求，此时不会触发 load 事件
• finished 属性：控制加载结束的状态
  • 在每次请求完毕后，需要手动将 loading 设置为 false，表示本次加载结束
  • 所有数据加载结束，finished 为 true，此时不会触发 load 事件

*****记住滚动条的位置

问题: 控制台显示每个列表内容滚动的都是同一个元素 body, 因而切换标签时, 无法记录列表上一次的滚动条位置

解决方法: 我们通过为每个标签的列表容器设置单独的滚动条, 这样切换不同标签时, 就不会影响相互的滚动位置

.article-list {
  // 百分比单位是相对于父元素的
  // height: 100%;

  // 视口（在移动端是布局视口）单位：vw 和 vh，不受父元素影响
  // 1vw = 视口宽度的百分之一
  // 1vh = 视口高度的百分之一
  height: 79vh;
  overflow-y: auto;
}