前言
项目地址: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
},
就实现效果了。