「这是我参与2022首次更文挑战的第4天,活动详情查看:2022首次更文挑战」。
前言
前面我们已经实现了底部导航栏的封装及页面切换功能。接下来继续来完善我们的网页版掘金APP。本次分享要实现的功能主要有如下几部分:
- 首页头部组件左侧图标展示
- 首页头部组件中间搜索框展示
- 首页头部组件右侧签到图标及状态展示
- 首页头部组件下方tab标签获取、展示及切换
头部组件组成分析
- 如下图所示,第一眼看上去头部的搜索部分和下面的tab标签像是一个完整的整体,然后下面的内容是另外一个单独的部分。但当我们开始着手去写代码引入vant组件时发现:恰恰相反。头部的左侧图片,中间搜索框和右侧签到状态是一个独立的整体,而下面的tab标签和标签对应的内容列表才是一个完整的整体。
- 另外,当我们点击顶部的搜索框尝试去搜索时发现:这并不是一个真正的搜索框,而是直接跳转到了一个新页面中进行搜索操作。如下图所示:
- 再看tab标签页,在我们的视口里只能看到4个标签:关注、推荐、热榜和头条精选。 点击右侧的三个横线图标后又跳到了一个新页面,在这个页面中又加载出来很多标签,点击标签后返回到主页列表并加载对应的内容。分析发现:这些除了我们看到的4个标签固定的,其它标签则都是通过接口从后台返回给我们的,如下图所示。为了方便实现我们本次实战就将所有标签一次性加载过来,不再进行新页面切换了。
接下来我们就对头部组件进行一个组装。
头部搜索栏
经过上面简单分析我们知道头部是由左侧图标、中间假的搜索框和右侧签到状态组成。本篇分享中:
- 左上角的活动图标我们就直接换成掘金官方的logo图标
- 中间假的搜索框可以借助vant组件库中的van-search组件实现,状态为disabled
- 右侧签到状态暂时先写死为已签到状态,后续再进行优化
我们到vant官方组件库中浏览一番,发现navbar导航栏比较适合我们的需求,刚好是左中右结构,只要把左中右中的内容都自定义替换成我们想要的就可以了
- 首先拉一个van-nav-bar组件过来
- 在该组件内容分别定义#left、#title和#right三个插槽模板
- 在#left插槽中再拉一个van-image组件用于展示官方logo图标,图片需通过import的形式导入,并设置为round原型图标
- 在#title插槽中拖一个van-search组件,因为这个搜索框并不会真正的搜索,只是用来展示和跳转,所以直接将该搜索框设为禁用状态即可
- 再在#right插槽中拖入一个van-icon用于展示签到状态图标
- 最后再进行一下样式调整(需重写van-search组件的样式)
下面来看下具体实现代码
<van-nav-bar>
<template #left>
<van-image :src="image" round />
</template>
<template #title>
<van-search placeholder="搜索稀土掘金" disabled />
</template>
<template #right>
<van-icon name="sign" size="28" />已签
</template>
</van-nav-bar>
复制代码
tab标签页
同样在vant组件库中也有现成的tab标签组件,直接拿过来使用即可,需要注意的是:除了我们看到的4个标签是固定的外,其它标签都是动态从后台获取的,这时我们就需要抓取掘金官方的API从掘金获取这些状态了。今天的分享中我们先将所有的标签做成固定的,等到下一篇文章中我们将对axios进行二次封装并实现前后端交互,然后再实现这几个标签的动态绑定。
- 还是一样在vant官方库中拉取一个van-tabs组件
- 再定义一个响应式属性categoryList
- 通过v-for指令将所有标签循环展示
Home.vue完整代码如下
<template>
<div>
<van-nav-bar>
<template #left>
<van-image :src="image" round />
</template>
<template #title>
<van-search placeholder="搜索稀土掘金" disabled />
</template>
<template #right>
<van-icon name="sign" size="28" />已签
</template>
</van-nav-bar>
<van-tabs>
<van-tab title="关注">
<div class="tab-list-content">关注列表</div>
</van-tab>
<van-tab title="推荐">
<div class="tab-list-content">推荐列表</div>
</van-tab>
<van-tab title="热榜">
<div class="tab-list-content">热榜列表</div>
</van-tab>
<van-tab v-for="item in categoryList" :key="item" :title="item">
<div class="tab-list-content">{{item}}列表</div>
</van-tab>
</van-tabs>
</div>
</template>
复制代码
import image from '../assets/images/logo1.svg';
import {reactive, toRefs} from 'vue'
export default {
name:'Home',
setup(){
const state = reactive({active:1,categoryList:[]});
state.categoryList = [
'后端','前端','Android','IOS','人工智能','开发工具','代码人生','阅读'
];
return {
...toRefs(state),
image
}
}
}
复制代码
.van-search{
background-color: #f4f4f4;
padding:0 !important;
}
.van-search__content{
background:#f4f4f4 !important;
border-radius:8px !important;
}
.tab-list-content{
margin-top:10px;
}
复制代码
最终效果如下图所示
总结
本次分享中我们实现了头部搜索栏和标签组件的分析和封装,从效果图来看已经有了初步的样子了。下节分享中我们将引入axios异步请求以及与后端服务的交互最终实现标签页的动态获取和展示。本次分享就先到这里了,喜欢的小伙伴欢迎点赞加关注哦!