5，头部Header组件 ly-tab插件的使用

components 下新建home文件夹

添加header.vue组件

<template>
  <header>
    <h1>荼七网</h1>
    <div class="search">
      <i class="iconfont icon-RectangleCopy"></i>
      <span>猜你喜欢</span>
    </div>
    <div class="kufu">
      <i class="iconfont icon-yonghu"></i>
    </div>
  </header>
</template>

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

<style scoped>
header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;

  top: 0;
  left: 0;
  width: 100%;
  height: 1.2267rem;
  background-color: #4ac23f;
}
header h1 {
  display: flex;
  font-size: 0.6267rem;
  color: #fff;
  padding: 0 0.1rem;
  align-items: center;

  height: 1.173333rem;
}
header h1 img {
  width: 100%;
  height: 100%;
}
.search {
  display: flex;
  align-items: center;
  width: 6.56rem;
  height: 0.8rem;
  background-color: #fff;
  border-radius: 12px;
}
.search i {
  padding: 0 0.16rem;
  color: #ccc;
  font-size: 0.7533rem;
}
.search span {
  padding: 0 0.06rem;
  color: #ccc;
  font-size: 0.4533rem;
}
.kufu i {
  font-size: 0.76rem;
  color: #fff;
}
</style>

Ly-tab

一个用于移动端的可触摸滑动具有回弹效果的可复用Vue组件
安装
npm i ly-tab -S

引入

import Vue from 'vue'
import LyTab from 'ly-tab'

Vue.use(LyTab)
// 之后便可在全局使用了

在home页使用

<template>
  <div class="home">
    <Tabbar />
    <Header />
    <ly-tab v-model="selectedId" :items="items" :options="options"> </ly-tab>
  </div>
</template>

<script>
import Tabbar from "@/components/common/Tabbar.vue";
import Header from "@/components/home/Header.vue";
export default {
  components: {
    Tabbar,
    Header,
  },
  name: "Home",
  data() {
    return {
      selectedId: 0,
      items: [
        { label: "首页" },
        { label: "推荐" },
        { label: "Android" },
        { label: "前端" },
        { label: "后端" },
        { label: "iOS" },
        { label: "产品" },
        { label: "人工智能" },
        { label: "设计" },
      ],
      options: {
        activeColor: "#4ac23f",
        // 可在这里指定labelKey为你数据里文字对应的字段
      },
    };
  },
};
</script>

<style scoped>
.ly-tab {
  position: fixed;
  top: 1.2rem;
  left: 0;
}
::v-deep .ly-tab {
  box-shadow: none;
  border-bottom: none;
}
</style>

效果：