Vue3+Vant开发：首页功能实现

🙈作者简介：练习时长两年半的Java up主
🙉个人主页：程序员老茶
🙊 ps:点赞👍是免费的，却可以让写博客的作者开心好久好久😎
📚系列专栏：Java全栈，计算机系列（火速更新中）
💭 格言：种一棵树最好的时间是十年前，其次是现在
🏡动动小手，点个关注不迷路，感谢宝子们一键三连

课程名：前端

内容/作用：知识点/设计/实验/作业/练习

学习：Vue3+Vant开发：首页功能实现

1、头部布局实现

下面修改views/home/index.vue文件

在下面的代码中，使用了nav-bar这个导航组件，同时在其插槽中添加了button按钮。

并且为按钮添加了相应的css样式。

<template>
  <div class="home-container">
    <van-nav-bar class="page-nav-bar">
      <template #right>
        <van-button
          type="info"
          size="small"
          round
          icon="search"
          class="search-button"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
export default {};
</script>

<style>

.home-container .search-button {
  width: 300px;
  height: 30px;
  background-color: #5babfb;
  border: none;
  font-size: 18px;
  color: #fff;
}
</style>

2、文章频道列表构建

关于文章的频道列表，这里主要使用了Vant中的Tab标签页组件。

Tab标签页组件提供的功能非常的强大，这里我们使用基础用法就可以。

在导航栏组件的下面添加Tab标签组件

 <!-- 频道列表 -->
    <van-tabs v-model:active="active" animated swipeable>
      <van-tab title="标签 1">内容 1</van-tab>
      <van-tab title="标签 2">内容 2</van-tab>
      <van-tab title="标签 3">内容 3</van-tab>
      <van-tab title="标签 4">内容 4</van-tab>
    </van-tabs>

关于active属性的作用：默认选中的页签的索引值，页签的索引值是从0开始计算的。

<script>
import {
    ref } from "vue";
export default {
   
  setup() {
   
    const active = ref(2);
    return {
    active };
  },
};
</script>

通过 animated 属性可以开启切换标签内容时的转场动画的效果。

通过 swipeable 属性可以开启滑动切换标签页。

这里，我们按住鼠标左键，可以体验到对应的滑动切换的效果。

但是，要注意的是，默认情况下只能在内容区域才能够实现滑动切换的效果，如果在空白区域是没有滑动切换的效果的。

当然，这不能满足我们的需求，后面我们在进行相应的处理。

3、样式调整

  <van-tabs class="channel-tabs" v-model:active="active" animated swipeable>
      <van-tab title="标签 1">内容 1</van-tab>
      <van-tab title="标签 2">内容 2</van-tab>
      <van-tab title="标签 3">内容 3</van-tab>
      <van-tab title="标签 5">内容 5</van-tab>
      <van-tab title="标签 6">内容 6</van-tab>
      <van-tab title="标签 7">内容 7</van-tab>
    </van-tabs>

这里，我们首先给van-tabs添加了一个类选择器。并且又添加了几项导航条。

下面添加对应的样式：

.channel-tabs .van-tab {
   
  min-width: 120px;
  border-right: 1px solid #edeff3;
  font-size: 16px;
  color: #777;
}

这里，每个导航项对应的样式为van-tab,关于这一点，我们可以通过审查元素进行查看。

在上面的样式中，我们设置了文字的颜色，但是当我们选中某个导航项的时候，希望改变颜色。

.channel-tabs .van-tab--active {
   
  color: #333;
}

这里通过审查，发现选中某项的时候，会添加一个van-tab--active选择器。

下面，我们修改底部条的样式。

默认情况下底部条的颜色为红色，这里我们希望修改成蓝色，同时修改一下它的宽度。

.channel-tabs .van-tabs__line {
   
  background-color: #3296fa;
  width: 20px;
     height: 6px;
}

这里也是通过审查元素可以查看到，对应的底部条的类选择器为van-tabs__line.

4、频道列表汉堡按钮处理

当我们单击该按钮的时候，会出现一个编辑频道的页面，关于这块内容我们先不处理。

这里我们先把该按钮的基本样式效果实现一下。

<van-tabs class="channel-tabs" v-model:active="active" animated swipeable>
      <van-tab title="标签 1">内容 1</van-tab>
      <van-tab title="标签 2">内容 2</van-tab>
      <van-tab title="标签 3">内容 3</van-tab>
      <van-tab title="标签 5">内容 5</van-tab>
      <van-tab title="标签 6">内容 6</van-tab>
      <van-tab title="标签 7">内容 7</van-tab>

      <template #nav-right>
        <van-icon name="wap-nav" class="hamburger-btn"></van-icon>
      </template>
    </van-tabs>

在tab组件中，我们使用了插槽，关于插槽这块内容，可以参考官方文档

https://vant-contrib.gitee.io/vant/v3/#/zh-CN/tab#tabs-slots

在这里，我们指定的是nav-left,表示的是标签栏右侧内容.

然后在插槽中使用了van-icon来指定了一个wap-nav图标。

下面给该图标指定了对应的css样式。

.channel-tabs .hamburger-btn {
   
  /* 固定定位 */
  position: fixed;
  /* 最右侧 */
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 66px;
  height: 32px;
  background-color: #fff;
  /* 设置透明度 */
  opacity: 0.902;
  /* 设置图标的大小 */
  font-size: 23px;
}

但是，这里我们遇到了一个问题：当我们展示到列表中的最后一项的时候，无法展示全。即时让wap-nav图标设置了透明度，效果上也不是很好。

这里我们可以在wap-nav图标前面在添加一个占位符。这样可以显示出最后一个列表项。

    <template #nav-right>
        <i class="placeholder"></i>
        <van-icon name="wap-nav" class="hamburger-btn"></van-icon>
      </template>

对应的css样式

.channel-tabs .placeholder {
   
  flex-shrink: 0;
  width: 66px;
  height: 32px;
}

这里我们指定了占位符的宽度与高度，但是测试的时候发现宽度不起作用。

因为整个列表都是使用flex布局，而且内部的每一项都平分了对应的宽度，所以这里再添加一个占位符，它的宽度就不起作用了。

这里我们给占位符添加了一个flex-shrink属性，并且取值为0，表示占位符不参与整个flex宽度的计算。

5、获取列表数据

这里，我们获取频道列表的真实数据。

首先构建一个发送请求的方法。

在src/api/user.js文件中添加对应的方法

// 获取用户频道列表
export const getUserChannels = () => {
   
  return request({
   
    method: "GET",
    url: "/user/channels",
  });
};

下面返回到views/home/index.vue中添加对应的方法

<script>
import {
    ref, onMounted, reactive, toRefs } from "vue";
import {
    getUserChannels } from "../../api/user";
function loadChannels(state) {
   
  getUserChannels().then((res) => {
   
    state.channels = res.data;
  });
}
export default {
   
  setup() {
   
    const state = reactive({
   
      channels: [],
    });
    const active = ref(0);
    onMounted(() => {
   
      loadChannels(state);
    });
    return {
   
      ...toRefs(state),
      active,
    };
  },
};
</script>

在上面的代码中，导入我们定义好的getUserChannels方法，然后在onMounted钩子函数中调用loadChnennes方法，发送异步请求获取数据。将服务端返回的列表数据填充到state中的channels数组中。

然后把state对象进行解构，在通过toRefs函数将其转换成响应式，返回模板。

模板的处理如下所示：

 <!-- 频道列表 -->
    <van-tabs class="channel-tabs" v-model:active="active" animated swipeable>
      <van-tab
        :title="channel.name"
        v-for="channel in channels"
        :key="channel.id"
        >{
  { channel.name }}的内容</van-tab
      >

      <template #nav-right>
        <i class="placeholder"></i>
        <van-icon name="wap-nav" class="hamburger-btn"></van-icon>
      </template>
    </van-tabs>

在上面的代码中，进行了循环遍历，展示列表项。

最后返回浏览器进行测试。

6、创建列表组件

从这一小节开始，我们要对文章列表进行处理。

当我们单击某个频道的的时候，会展示该频道下的对应的文章内容。

基本的思路：

在这里，我们可以创建一个文章列表组件，到我们单击某个频道的时候，把该频道的编号传递到文章列表组件中，该组件根据接收到的频道的编号ÿ