一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第17天，点击查看活动详情。
前言
大家好，上一篇文章圈子详情中，我们实现了圈子基本信息的展示以及圈子下沸点列表的展示，并且我们还提到虽然是新页面但圈子详情和沸点列表都用的是我们以前封装好的组件，所以实现起来也不算复杂。那么除了圈子基本信息，沸点列表展示外，还有一些细节功能需要完善下，今天我们主要分享一下三点功能：
- 沸点首页中，当前圈子中新的沸点数
- 沸点详情页中按最新或最热排序
- 沸点详情页点击查看更多跳转到更多详情页
圈子未读沸点数
如上图所示是掘金官方app中的沸点首页截图，如果圈子下有新的未读沸点则会在当前圈子的右上角显示出沸点的的数量。我们也尝试来实现一下该功能，在后台接口返回给我们的数据对象中有个new_short_msg_count，该属性记录的就是当前圈子下未读沸点数（但是这里有个问题，因为我们抓的是网页版的后台api，不管圈子下是否有未读沸点，该属性值始终都是0，可能是只有app端才会有数据吧）。我们就假装有数据按照有数据来实现该功能：
- 在vant官网中有个badge组件，该组件可以在其它组件右上角显示一个徽章（数字或点等）
- 找到之前封装好的PinList组件在该组件中添加一个van-badge组件，并将top-name盒子包裹起来
- 同时将原来topic-name盒子上的v-for指令迁移到van-badge上
- 最后再给van-badge的content属性绑定上new_short_msg_count 核心代码及效果图
<van-badge
:content="item.new_short_msg_count"
color="#1989fa"
v-for="item in topicList"
:key="item.topic_id"
>
<div class="topic-name" @click="toTopicPins(item.topic_id)">
<van-image :src="item.topic.icon" />
<span>{{ item.topic.title }}</span>
</div>
</van-badge>
沸点详情页中按最新或最热排序
在昨天的圈子详情分享中还遗留了一个排序功能未实现。关于这个排序功能主要工作还是集中在样式布局上，因为相关的后台接口已经封装好并预留了相关参数，所以只要我们把排序布局设计好并传入相应参数即可实现。直接上代码吧：
<div class="topic-sort">
<div class="sort-title">排序</div>
<div class="sort-opt">
<span :class="{ active: sort === 0 }" @click="sortTopic(0, 500)"
>最新</span
>
<span>|</span>
<span :class="{ active: sort === 1 }" @click="sortTopic(1, 200)"
>最热</span
>
</div>
const sortTopic = (sort, sort_type) => {
state.sort = sort;
api.topic("0", sort_type, topic_id).then((res) => {
console.log(res);
state.pinList = res.data;
});
};
sortTopic(0, 500);
更多详情
今天的分享还剩下最后一项功能 - 在圈子基本信息板块的最下面还有个“更多详细信息”链接，点击后跳转到一个新的页面，今天的主要任务就是把新的页面和路由配好并实现简单的跳转即可。
- 首先新建一个TopicDetailsMore.vue组件，并配置相应路由信息（参数路由，需要接收圈子id）
- 给“更多详细信息”绑定click事件实现跳转 代码就不展示了，直接上图吧
总结
今天的分享中我们主要实现了3个功能点，在沸点首页展示圈子下的未读沸点数，实现圈子详情中沸点列表排序，最后还实现了点击更多跳转到更多详情圈子页。关于更多圈子详情页中的内容我们明天继续分享。今天的分享就到这里了。欢迎小伙伴点赞关注加评论哦，感谢大家！
