前言

项目地址：https://github.com/cctyl/sunofbeach_mobile

太惨了，到目前为止我已经写到文章详情，登录页面那里去了。但是一招不慎，笔记都放在u盘里面被格式化了。这篇是后来补上的，太久了忘了上一篇写到哪个部分，有些代码后期完善了很多，不是本节的内容，如果大家跑不起来，就直接看源码把

目标效果

我们现在要做的是顶部的标签栏，长什么样？

长这样：

对应sob主站的 要求这个tag栏是可滚动的，可点击切换，并且选中有一个高亮下标

实现

我们依然使用nutui的 滚动标签实现

https://nutui.jd.com/2x/#/scroller

<nut-scroller @jump="jump()">
    <div slot="list" class="nut-hor-list-item" v-for="(item, index) of listData" :key="index">
        <dl class="nut-scroller-item-info">
            <dt>防水升级版 蓝 迷你小音</dt>
            <dd>2018-02-25</dd>
        </dl>
    </div>
    <slot slot="more"><div class="nut-hor-jump-more">查看更多</div></slot>
</nut-scroller>

分析下他的使用方式，外面是一层 nut-scroller，里面的每一个子项目，都是放到 这个slot里面的

<div slot="list" class="nut-hor-list-item"></div>

那么我们也这么写，首先要拿到数据：

首先需要去api中定义好方法，这个就不重复了

到methods中定义：

/**
 * 获取顶部标签数据
 */
async getCategoryList() {
    let result = await api.getCategoryList()
    this.categoryList = result.data
},

到data中定义

categoryList: [], //顶部标签数组

在mouted中调用

//获得顶部标签页
this.getCategoryList()

拿到数据之后，我们就去页面上v-for遍历，具体如下：

<!--标签栏-->
<nut-scroller class="tagScroll">

    <div slot="list" class="tagItem nut-hor-list-item " :class="{tagCurrent: currentTag==-1}"
         @click="changeTag(-1)"
    >
        <span class="tagTitle">推荐</span>
    </div>

    <div slot="list" class="tagItem nut-hor-list-item " :class="{tagCurrent: currentTag==index}"
         v-for="(item,index) in categoryList" :key="item.id"
         @click="changeTag(index)"
    >
        <span class="tagTitle">{{item.categoryName}}</span>
    </div>

</nut-scroller>

这里有两个子项目，为啥？因为多了一个推荐。这个推荐并不在category数组中，他是单独的一个标签，所以我们自己额外加上一个。

高亮效果，思路就是，给每个标签加上点击事件，被点击时传递本标签的id，存入data中。页面上，如果当前记录的id，就是我自身的id，那就给自己加上一个class

我们在每个标签的div上，加上点击事件，以及动态类名绑定

:class="{tagCurrent: currentTag==-1}"
         @click="changeTag(-1)"

相应的，到data中定义 currentTag属性，到methods中定义changeTag方法：

/**
 * 切换标签页的回调
 * @param tagIndex
 */
changeTag(tagIndex) {
    console.log('切换了页面')
    this.currentTag = tagIndex
},

就实现效果了。