一个项目实战：结合Vue3+Vant3开发网页版掘金APP实现首页头部搜索及标签切换

2023-09-30 02:51:26

前言

在前面的文章中，我们已经实现了底部导航栏的封装及页面切换功能。本次分享要实现的功能主要有如下几部分：

首页头部组件左侧图标展示
首页头部组件中间搜索框展示
首页头部组件右侧标签切换

首页头部组件左侧图标展示

首页头部组件左侧的图标展示非常简单，只需要在头部组件中添加一个带有图标的按钮即可。

<template>
  <div class="header-left">
    <van-icon name="arrow-left" />
  </div>
</template>

<script>
export default {
  name: 'HeaderLeft',
};
</script>

.header-left {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #eee;
}

.van-icon {
  font-size: 20px;
  color: #333;
}

首页头部组件中间搜索框展示

首页头部组件中间的搜索框展示也比较简单，只需要在头部组件中添加一个输入框即可。

<template>
  <div class="header-center">
    <van-search placeholder="搜索文章、用户" />
  </div>
</template>

<script>
export default {
  name: 'HeaderCenter',
};
</script>

.header-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

首页头部组件右侧标签切换

首页头部组件右侧的标签切换需要用到Vant的Tab组件。

<template>
  <div class="header-right">
    <van-tabbar v-model="activeTab" @change="changeTab">
      <van-tabbar-item name="home">首页</van-tabbar-item>
      <van-tabbar-item name="explore">发现</van-tabbar-item>
      <van-tabbar-item name="message">消息</van-tabbar-item>
      <van-tabbar-item name="me">我</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'HeaderRight',
  data() {
    return {
      activeTab: 'home',
    };
  },
  methods: {
    changeTab(tab) {
      console.log(tab);
    },
  },
};
</script>

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.van-tabbar {
  width: 100%;
  height: 40px;
  background-color: #fff;
}

.van-tabbar-item {
  flex: 1;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  color: #333;
}

.van-tabbar-item.van-tabbar-item--active {
  color: #409eff;
}