【项目实战】基于Vue3+Vant3造一个网页版的类掘金app项目 - 沸点首页布局

「这是我参与2022首次更文挑战的第27天，活动详情查看：2022首次更文挑战」

前言

大家好，昨天我们实现了首页根据所选的子标签来动态加载列表数据，但是在控制选中子标签样式时还有些小的瑕疵，虽然不是什么大问题，但我们也来完善一下，另外关于首页的一些基本功能也算完成了。今天我们本来打算分享一下文章详情页功能，但是找了好久关于文章详情的后台api都没有找到，只能暂时先搁置了，接下来就先来分享一下沸点页的内容吧。本次分享内容：

首页子标签样式控制完善
沸点首页布局

首页子标签样式控制

看过上篇分享的小伙伴应该都知道，我们是通过直接操作dom的方式来控制子标签样式的，当我们点击某个子标签时会先把所有类名为"tag-item"的子标签样式全部更新为非活动状态，然后再把当前点击的子标签样式设为活动状态，即添加"active"类，这样就会导致一个问题：

我们在获取dom元素时是通过类名"tag-item"来获取的，而在首页中有很多个父标签，每个父标签又有很多个子标签，并且这些子标签都有着相同的类名"tag-item"，因此当我们在点击某个父标签下的某个子标签时，则会把该父标签以及其它父标签下所有子标签的样式都会清空，比如：我们在“前端”父标签下选择了“javascript”子标签，然后我们再切换到“后端”父标签下选择一个“java”子标签，这时当我们再回到“前端”下时，发现其下面的“javascript”选中样式也被清空了，而实际上我们是想保留其选中状态的。

如下图后来想到一个方案：我们的子标签是我们自己封装的一个组件，组件内容每次都会根据父标签来动态加载，那么我们只需要给每个父标签下的子标签添加一个不同的属性，然后在获取dom的时候再加上这个属性条件过滤一下就可以解决了。

给JTags组件添加一个新的props属性categoryName
在Home.vue调用JTags时把父标签的名称作为props传过去
修改JTags.vue 给每个li都绑定一个data-name的属性，值就是上面定义的props - categoryName

代码及效果如下：

<!--JTag.vue-->
<li
  class="tag-item"
  :class="{ active: $index == 0 }"
  v-for="(tag, $index) in tagList"
  :key="tag.tag_id"
  :data-id="tag.tag_id"
  :data-name="categoryName"<!--新增内容-->
  @click="clickTag(tag.tag_id)"
>
复制代码

// JTag.vue
 const clickTag = function (tagId) {
      const { categoryName } = props;
      const tags = document.querySelectorAll(`.tag-item[data-name='${categoryName}']`);
      //...
    };
复制代码

<!--Home.vue-->
 <j-tags
    url="/juejin/recommend_tag_list"
    :cateId="item.category_id"
    :categoryName="item.category_url"
  ></j-tags>
复制代码

沸点首页布局

接下来在简单的分析和实现一下沸点首页的布局，首先看下官方app中的布局，如下图：整个页面就是一个大的tab组件，分为：“发现”tab和“关注”tab，在发现tab页中首先是推荐给我们的圈子内容，下面则是具体的沸点内容。而在关注tab页中则直接就是所关注的掘友们所发的沸点内容。最后在页面的右下角悬浮着一个编辑图标，点击后跳转到发布沸点页面。今天的分享中具体的内容和操作暂时先不实现，先来简单的实现一下页面布局即可。大概实现思路如下：

在之前创建好的Fire.vue中，添加一个van-tabs组件，设置sticky和swipable属性为true
在van-tabs下添加两个子van-tab，title分别为“发现”和“关注”
然后再在“发现”tab中添加“推荐圈子”div盒子和沸点内容div盒子，并设置好样式
最后再在页面右下角放置一个fixed定位的编辑图标

基本的布局框架就差不多实现了。代码及效果图

<van-tabs sticky swipeable>
    <van-tab title="发现">
      <div class="tab-content">
        <div class="topic">
          <div class="title-box">
            <div class="title">推荐圈子</div>
            <div class="my-topic">我加入的圈子</div>
          </div>
          <div class="topic-box">
            <div class="topic-name">推荐圈子</div>
            <div class="topic-name">推荐圈子</div>
            <div class="topic-name">推荐圈子</div>
            <div class="topic-name">推荐圈子</div>
            <div class="topic-name">推荐圈子</div>
          </div>
        </div>
        <div class="content-box" v-for="item in 5" :key="item">
          <div class="fire-item">
            <div class="author">
              <van-image
                class="photo"
                round
                src="https://p9-passport.byteacctimg.com/img/user-avatar/4eb96a510ba31abc55e029bd74da2be0~300x300.image"
              />
              <div class="author-title">红毛丹</div>
            </div>
            <div class="content">
              红毛丹红毛丹红毛丹红毛丹红毛丹红毛丹红毛丹红毛丹红毛丹红毛丹红毛丹红毛丹红毛丹
            </div>
            <div class="operation">
              <div class="share"><van-icon name="share-o" />分享</div>
              <div class="comment"><van-icon name="chat-o" />评论</div>
              <div class="digg"><van-icon name="good-job-o" />点赞</div>
            </div>
          </div>
        </div>
      </div>
    </van-tab>
    <van-tab title="关注">
      <div class="tab-content"></div>
    </van-tab>
  </van-tabs>
  <div class="publish">
    <van-icon name="edit" />
  </div>
复制代码

总结

今天的分享中我们修复了首页标签中样式控制问题，同时还简单分析及实现了下沸点首页的页面布局。明天将继续完善沸点首页实现数据的动态绑定。今天的分享就到这里了。