【项目实战】基于Vue3+Vant3造一个网页版的类掘金app项目 - 发现首页如上图所示是官方APP发现页的截图，整个

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第19天，点击查看活动详情。

前言

大家好，在上一篇文章更多详情的分享中，我们实现了沸点页相关的最后一个功能模块 - 圈子更多详情功能的开发，到此我们沸点相关的所有分享就到此结束了。从今天开始我们将进入到下一章节内容的分享 - 发现页分享

布局分析

如上图所示是官方APP发现页的截图，整个页面共分为6个板块：搜索栏、轮播图、分类块、文章作者榜、推荐技术团队和热门文章。该页面比较特殊，为什么这么说呢，因为发现页不像其它页面一样在网页版都能找到对应的独立的web页面，如首页、沸点等。而这个页面更像是一个拼凑的页面，融合了很多功能点在里面，那么我们本次分享的策略是如果能在网页版找到对应的接口最好，如果找不到就把样式布局实现而不实现具体的功能，比如“招聘”暂时没有找到对应的web页面或接口，那么我们只把样式写好放着，具体功能就不实现了。下面来简单梳理下各个模块的业务逻辑关系：

搜索栏：点击后跳转到新页面，实现全局检索（暂不实现）
轮播图：广告轮播，可以在网页版中获取到数据接口
分类块：共有4个大类：招聘、话题、字学和活动，点击后跳转到新页面并展示相关内容数据，其中招聘和字学暂未找到对应接口
文章作者榜：同样点击后会跳转到新页面，展示对应的作者或者文章
推荐技术团队：官方推荐的一些技术团队，点击某个团队进入到团队主要，点击全部技术团队进入到新页面展示团队列表
热门文章：跟首页类似，展示比较热门的文章列表

功能实现

本次分享我们先把页面布局设计实现，也就是静态页面，至于动态数据渲染我们将放在下一次分享中实现。上面我们已经梳理了页面的组成（6大模块），下面我们就把每个模块的布局设计来实现一下：

搜索栏模块因为该页面的搜索栏模块并非真正的搜索，而是点击后跳转到新页面，所以我们只需添加一个search-box盒子，样式简单设置一下，看上去像是个文本框即可。具体代码如下：

<div class="search-box">
  <div class="search-input">搜索稀土掘金</div>
</div>

轮播图轮播图实际上就是两个广告图片，我们可以借助vant中的van-swipe和van-swipe-item组件来实现轮播图。首先添加一个swiper-box盒子，在该盒子中添加van-swipe组件并设置autoplay属性为3000（每隔3s自动切换），然后再在van-swipe下添加2个轮播项van-swipe-item，并在每个van-swipe-item下添加img元素并设置src属性值。关于图片路径可以直接到掘金官方薅两张图片过来。代码如下：

<div class="swiper-box">
  <van-swipe :autoplay="3000" lazy-render>
    <van-swipe-item>
      <img
        src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e18d28aede5d45d3a6d7b14dc0695ff8~tplv-k3u1fbpfcp-no-mark:480:400:0:0.awebp?"
      />
    </van-swipe-item>
    <van-swipe-item>
      <img
        src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/72e2008a238c42afb82842fbc916c23b~tplv-k3u1fbpfcp-no-mark:480:400:0:0.awebp?"
      />
    </van-swipe-item>
  </van-swipe>
</div>

分类模块分类模块主要包含4个子类：招聘、话题、字学和活动。该模块实现可以通过flex布局实现。首先添加一个category-box盒子设置display属性为flex，然后在category-box里添加4个子盒子category-item同样也是菜用flex布局，只不过是纵向展示，最后在category-item分别再添加一个van-icon和span用于展示图标和标题

<div class="category-box">
  <div class="category-item">
    <van-icon name="gem-o" size="30px" style="color: gold"></van-icon>
    <span>招聘</span>
  </div>
  <div class="category-item">
    <van-icon
      name="comment-circle-o"
      size="30px"
      style="color: gold"
    ></van-icon>
    <span>话题</span>
  </div>
  <div class="category-item">
    <van-icon name="flag-o" size="30px" style="color: gold"></van-icon>
    <span>字学</span>
  </div>
  <div class="category-item">
    <van-icon name="bullhorn-o" size="30px" style="color: gold"></van-icon>
    <span>活动</span>
  </div>
</div>

文章作者榜榜单分为文章榜和作者榜，但是他们的布局都是一样的，我们依然还是采用flex布局。首先添加bang-box盒子，display属性设置为flex，在bang-box下在添加两个author-box盒子，分别用于展示文章榜和作者榜，然后在author-box中再分别添加一个bang-title和bang-img的盒子，用于展示标题和图标信息，这个盒子也是菜用flex布局，方向设为纵向。这里需要注意的就是每个榜中的图片在展示时是有一部分重叠展示的，可以通过设置magin-left或位移实现。

<div class="bang-box">
  <div class="author-bang">
    <div class="bang-title">
      <span class="title">文章榜</span>
      <span class="sub-title">每日更新</span>
    </div>
    <div class="bang-img">
      <van-image
        v-for="item in 3"
        :key="item"
        src="https://p9-passport.byteacctimg.com/img/user-avatar/4eb96a510ba31abc55e029bd74da2be0~300x300.image"
        round
      ></van-image>
    </div>
  </div>
  <div class="author-bang">
    <div class="bang-title">
      <span class="title">作者榜</span>
      <span class="sub-title">每日更新</span>
    </div>
    <div class="bang-img">
      <van-image
        v-for="item in 3"
        :key="item"
        src="https://p9-passport.byteacctimg.com/img/user-avatar/4eb96a510ba31abc55e029bd74da2be0~300x300.image"
        round
      ></van-image>
    </div>
  </div>
</div>

推荐技术团队这个模块就比较简单了，就是简单的展示下系统推荐的技术团队的头像信息。依然采用flex布局。这个就不多说了，直接添加一个recommend-box盒子，并在该盒子中添加van-image把团队的头像展示出来即可

<div class="recommend-box">
  <div class="title-box">
    <span class="title">推荐技术团队</span>
    <span class="all-team">全部技术团队></span>
  </div>
  <div class="team-box">
    <div class="team" v-for="item in 8" :key="item">
      <van-image
        src="https://p9-passport.byteacctimg.com/img/user-avatar/4eb96a510ba31abc55e029bd74da2be0~300x300.image"
      ></van-image>
    </div>
  </div>
</div>

热榜文章最后一个热门文章模块就是一个文章列表，这个我们之前曾封装过一个JList.vue的组件，因此我们这里可以直接使用JList进行渲染。在页面template的最后添加一个hot-box，然后导入JList组件直接使用即可，由于我们现在做的都是静态页面，如果直接食用JList可能会出错导致页面加载不出来，因此我们可以将JList相关代码暂时注释掉

<div class="hot-articles-box">
  <div class="hot-bang">
    <van-icon name="fire-o" color="#ee0a24" />热门文章
  </div>
  <!-- <j-list
    url="/juejin/recommend_cate_feed"
    :cateId="item.category_id"
    :limit="20"
    :sort_type="200"
  /> -->
</div>

最终静态页面效果图如下：

总结

本次分享我们开始了新的章节 - 发现页功能开发，主要分析了发现页的组成及布局设计，最后根据分析实现了一个简单的静态的发现页，下次分享我将继续完善发现页并实现页面的动态数据渲染。今天的分享就到这里了，欢迎小伙伴点个赞哦，感谢！