黑马头条项目练习（day03）

今天我们来到了首页的制作，首先完善我们的/home/index.vue

首页的话用到了vant组件的下拉刷新以及触底刷新，废话不多说，上代码

<template>
  <div class="home-container">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar" fixed>
      <van-button
        class="search-btn"
        slot="title"
        type="info"
        size="small"
        round
        icon="search"
        >搜索</van-button
      >
    </van-nav-bar>
    <!-- /导航栏 -->

    <!-- 频道列表 -->
    <!--
animated 滑动的动画
border 底边框线
swipeable 开启左右手势滑动
-->
    <van-tabs class="channel-tabs" v-model="active" swipeable animated border>
      <van-tab
        v-for="channel in UserChannels"
        :key="channel.id"
        :title="channel.name"
      >
        <div slot="default">
          <articleList :channel="channel"></articleList>
        </div>
      </van-tab>
      <!-- 右侧自定义内容 -->
      <!-- 占位元素 -->
      <div class="placeholder" slot="nav-right"></div>
      <!-- 右侧按钮 -->
      <template slot="nav-right">
        <div class="hamburger-btn">
          <i class="toutiao toutiao-gengduo"></i>
        </div>
      </template>
    </van-tabs>
    <!-- /频道列表 -->
  </div>
</template>

<script>
import { getUserChannelsAPI } from "@/api";
import articleList from "@/views/home/components/article-list";
export default {
  name: "HomeIndex",
  components: {
    articleList,
  },
  props: {},
  data() {
    return {
      active: 0,
      UserChannels: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.loadChannels();
  },
  mounted() {},
  methods: {
    async loadChannels() {
      try {
        // 发请求
        const { data } = await getUserChannelsAPI();
        console.log(data);
        // 成功赋值
        this.UserChannels = data.data.channels;
      } catch (err) {
        // 失败处理
        this.$toast("获取频道数据失败");
      }
    },
  },
};
</script>

<style scoped lang="less">
.home-container {
  // deep的作用是忽略scoped给css标签加上哈希值的影响
  padding-top: 174px;
  padding-bottom: 100px;
  // tabs 标签导航也设置为固定定位
  /deep/ .van-tabs__wrap {
    position: fixed;
    top: 92px;
    z-index: 1;
    left: 0; // left和right左右各拉一下，为了解决fixed定位造成的菜单无法点击移动的问题
    right: 0;
    height: 82px;
  }
  /deep/ .van-nav-bar__title {
    max-width: unset;
  }
  .search-btn {
    width: 555px;
    height: 64px;
    background-color: #5babfb;
    border: none;
    font-size: 28px;
    .van-icon {
      font-size: 32px;
    }
  }
}

/deep/ .channel-tabs {
  .van-tab {
    border-right: 1px solid #edeff3;
    min-width: 200px;
    font-size: 30px;
    color: #777777;
  }

  .van-tab--active {
    color: #333333;
  }

  .van-tabs__nav {
    padding-bottom: 0;
  }

  .van-tabs__line {
    bottom: 8px;
    width: 31px !important;
    height: 6px;
    background-color: #3296fa;
  }

  .placeholder {
    flex-shrink: 0;
    width: 66px;
    height: 82px;
  }

  .hamburger-btn {
    position: fixed;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 66px;
    height: 82px;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.902);
    i.toutiao {
      font-size: 33px;
    }
    &:before {
      content: "";
      position: absolute;
      left: 0;
      width: 1px;
      height: 58px;
      background-image: url(~@/assets/gradient-gray-line.png);
      background-size: contain;
    }
  }
}
</style>

因为主页里面的文章模块可以当作复用模块，所以封装一个文章模块，让多个分类共用一个，模块代码如下：

<template>
  <div class="article-list">
    <!--
      List 列表组件：瀑布流滚动加载，用于展示长列表。

      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 事件
     -->

    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      :success-text="successText"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
      >
        <van-cell v-for="(article, index) in list" :key="index">
          <div slot="title">
            <ArticleItem :article="article"></ArticleItem>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticlesAPI } from "@/api";
import ArticleItem from "@/components/article-item";
export default {
  name: "ArticleList",
  components: {
    ArticleItem,
  },
  props: {
    channel: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      list: [], // 存储列表数据的数组
      loading: false, // 控制加载中 loading 状态
      isLoading: false,
      finished: false, // 控制数据加载结束的状态
      pre_timestamp: null, // 历史时间戳
      error: false,
      successText: "刷新成功",
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 初始化或滚动到底部的时候会触发调用 onLoad
    async onLoad() {
      console.log("onLoad");
      // 1. 请求获取数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //   // 2. 把请求结果数据追加放到 list 数组中  【一定要记住是追加，因为只有追加才会让列表高度不断增加】
      //   for (let i = 0; i < 10; i++) {
      //     // 0 + 1 = 1
      //     // 1 + 1 = 2
      //     // 2 + 1 = 3
      //     this.list.push(this.list.length + 1);
      //   }

      //   // 3. 本次数据加载结束之后要把加载状态设置为结束
      //   //     loading 关闭以后才能触发下一次的加载更多
      //   this.loading = false;

      //   // 4. 判断数据是否全部加载完成
      //   if (this.list.length >= 40) {
      //     // 如果没有数据了，把 finished 设置为 true，之后不再触发加载更多
      //     this.finished = true;
      //   }
      // }, 1000);

      // 1. 发送请求数据
      try {
        const { data } = await getArticlesAPI({
          channel_id: this.channel.id,
          timestamp: this.pre_timestamp || Date.now(),
          with_top: 1,
        });
        // 手动制造错误，触发点击加载
        // if (Math.random() > 0.5) {
        //   throw new Error("错误");
        // }
        console.log(data);
        // 2. 将数据追加到data数组中保存
        const { results } = data.data;
        this.list = [...this.list, ...results];
        // 3. 将loading设置false
        this.loading = false;
        this.pre_timestamp = data.data.pre_timestamp;
        // 4. 判断数据是否加载完成
        if (data.data.pre_timestamp === null) {
          this.finished = true;
        }
      } catch (error) {
        this.loading = false;
        this.error = true;
        this.$toast("获取当前频道的文章失败");
        console.log(error);
      }
    },

    async onRefresh() {
      try {
        const { data } = await getArticlesAPI({
          channel_id: this.channel.id,
          timestamp: Date.now(),
          with_top: 1,
        });
        console.log(data);
        // 2. 将数据追加到data数组中保存
        const { results } = data.data;
        this.list = [...results, ...this.list];
        // this.$toast("刷新成功");
        this.successText = `刷新了${results.length}条数据`;
        // 3. 将loading设置false
        this.isLoading = false;
      } catch (error) {
        this.isLoading = false;
        this.$toast("刷新失败");
      }
    },
  },
};
</script>

<style scoped lang="less">
.article-list {
  // 百分比单位是相对于父元素的
  // height: 100%;

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

然后，因为文章模块还有很多小模块也能复用，所以，再封装一个文章小模块，代码如下：

<template>
  <div class="article-item">
    <van-cell>
      <div slot="title">{{ article.title }}</div>

      <div slot="label">
        <div v-if="article.cover.type === 3">
          <span v-for="(img, index) in article.cover.images" :key="index">
            <van-image width="100" height="100" :src="img" />
          </span>
        </div>
        <div>
          <span>作者名字</span>
          <span>评论</span>
          <span>时间</span>
        </div>
      </div>

      <div slot="default" v-if="article.cover.type === 1">
        <van-image width="100" height="100" :src="article.cover.images[0]" />
      </div>
    </van-cell>
  </div>
</template>

<script>
export default {
  name: "ArticleItem",
  components: {},
  props: {
    // 定义一个props，接收这一行的数据
    article: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="less">
.article-item {
  .title {
    font-size: 32px;
    color: #3a3a3a;
  }

  .van-cell__title {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .van-cell__value {
    flex: unset;
    width: 232px;
    height: 146px;
    padding-left: 25px;
  }

  .right-cover {
    width: 100%;
    height: 146px;
  }

  .label-info-wrap span {
    font-size: 22px;
    color: #b4b4b4;
    margin-right: 25px;
  }

  .cover-wrap {
    display: flex;
    padding: 30px 0;
    .cover-item {
      flex: 1;
      height: 146px;
      &:not(:last-child) {
        padding-right: 4px;
      }
      .cover-item-img {
        width: 100%;
        height: 146px;
      }
    }
  }
}
</style>

over！