【项目实战】基于Vue3+Vant3造一个网页版的类掘金app项目 - 实现首页头部搜索及tab标签切换

「这是我参与2022首次更文挑战的第4天,活动详情查看:2022首次更文挑战」。

前言

前面我们已经实现了底部导航栏的封装及页面切换功能。接下来继续来完善我们的网页版掘金APP。本次分享要实现的功能主要有如下几部分:

  • 首页头部组件左侧图标展示
  • 首页头部组件中间搜索框展示
  • 首页头部组件右侧签到图标及状态展示
  • 首页头部组件下方tab标签获取、展示及切换

头部组件组成分析

  • 如下图所示,第一眼看上去头部的搜索部分和下面的tab标签像是一个完整的整体,然后下面的内容是另外一个单独的部分。但当我们开始着手去写代码引入vant组件时发现:恰恰相反。头部的左侧图片,中间搜索框和右侧签到状态是一个独立的整体,而下面的tab标签和标签对应的内容列表才是一个完整的整体。

image.png

  • 另外,当我们点击顶部的搜索框尝试去搜索时发现:这并不是一个真正的搜索框,而是直接跳转到了一个新页面中进行搜索操作。如下图所示:

image.png

  • 再看tab标签页,在我们的视口里只能看到4个标签:关注、推荐、热榜和头条精选。 点击右侧的三个横线图标后又跳到了一个新页面,在这个页面中又加载出来很多标签,点击标签后返回到主页列表并加载对应的内容。分析发现:这些除了我们看到的4个标签固定的,其它标签则都是通过接口从后台返回给我们的,如下图所示。为了方便实现我们本次实战就将所有标签一次性加载过来,不再进行新页面切换了。

image.png

image.png 接下来我们就对头部组件进行一个组装。

头部搜索栏

经过上面简单分析我们知道头部是由左侧图标、中间假的搜索框和右侧签到状态组成。本篇分享中:

  • 左上角的活动图标我们就直接换成掘金官方的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;
}
复制代码

最终效果如下图所示

image.png

总结

本次分享中我们实现了头部搜索栏和标签组件的分析和封装,从效果图来看已经有了初步的样子了。下节分享中我们将引入axios异步请求以及与后端服务的交互最终实现标签页的动态获取和展示。本次分享就先到这里了,喜欢的小伙伴欢迎点赞加关注哦!

Guess you like

Origin juejin.im/post/7055851403817779230