一.一级菜单
1.实际效果,点击标题切换内容
2.用了vertify样式,标题pname从后端传数据
<v-tabs
v-model="tab"
>
<v-tabs-slider color="yellow"></v-tabs-slider> //标题下黄线
<v-tab
v-for="item in items"
:key="item.pname"
>
{{ item.pname }} //标题
</v-tab>
</v-tabs>这里讲解一个原理,具体数据格式请看第四条的数据初始化
item是固定写法,items指取有数据的大数组,item in items指items里的一条数据第一层{},
然后取item.pname把导航栏标题显示出来
3.标题下内容
<v-tabs-items v-model="tab">
<v-tab-item v-for="item in items" :key="item.pname">
<v-card
v-for="newss in item.news"
:key="newss.title"
@click="godetail()"
elevation="2"
outlined
shaped
tile
flat>
<v-list-item three-line>
<v-list-item-content>
<!-- <v-list-item-title
class="text-h5 mb-1"
>
{{newss.title}}
</v-list-item-title> -->
<v-list-item-subtitle>{{newss.title}}</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-avatar
tile
size="80"
color="grey"
><img :src="newss.url"></v-list-item-avatar>
</v-list-item>
<v-card-actions>
<v-btn
outlined
rounded
text
small
>
{{newss.tags}}
</v-btn>
</v-card-actions>
</v-card>
</v-tab-item>
</v-tabs-items>v-for就像java里的二层for循环一样,要取第二层news里的内容,需要先循环第一层,于是就要把item in items先写在第一层,这样就取到了item第一个括号,接着取news里的内容,写第二个v-for,上面的v-card是一个样式,把内容放到一个卡片里,接下来 v-for=”newss in item.news”
item是第一层,包含news,news是第二层括号,简单讲也就是数组里的数组,大数组包含多个标题,小数组则是每个标题的对应内容,这里的newss是随便取得名字,指代的是news数组里的每一个数组
这里的key大概是主键的意思
有了newss之后,就可以取每一个小数组里的每一个属性的值
只要在v-card包围内,都可以用{
{newss.title}}{
{newss.tags}}取值
其中@click点击事件的作用是跳转新闻资讯的具体内容,与导航栏切换无关
4.初始化数据
在data里需要初始化tab,item
tab: null,
tab用来导航切换定位
items作为大数组,里面的数据格式是这样的
items:[
{
"pname":"热榜",
"news":[{
"tags":"特朗普",
"title":"xxxxxx",
"url":"",
"src":"",
},{
"tags":"解放军",
"title":"xxxxx",
"url":"https://xxxxx.jpg",
"src":"https://mbd.baidu.com/xxxxx",
}
]
},
{
"pname":"热点话题",
"news":[{
"tags":"",
"title":"",
"url":"",
"src":"",
},{
"tags":"",
"title":"",
"url":"",
"src":"",
}]
}]二.二级菜单
二级菜单比一级菜单多了一个侧边栏,其原理是没什么区别的
这里用的依旧是vertify框架
1.一级副标题
<v-tabs
v-model="tab"
grow
show-arrows
>
<v-tab v-for="item in items" :key="item.pname">
{{ item.pname }}
</v-tab>
</v-tabs>依旧是显示专项、朋友圈、收藏等功能,依旧是依靠tab来定位
2.二级菜单(侧边栏)及其内容(海报图片)
二级菜单需要一个subtab来定位,需要后端传数据的时候加上,不过赋个空值就可以了
这里没有数据格式,因为是从后端取得,我有空调一下接口再放到下面第三点了
<v-tabs-items v-model="tab">
<v-tab-item v-for="item in items" :key="item.pname">
<v-card flat>
<v-tabs
v-model="item.subtab"
vertical
>
<v-tab v-for="item in item.secondCategory" :key="item.cname">
{{ item.cname }}
</v-tab>
<v-tabs-items v-model="item.subtab" class="mt-4">
<v-tab-item v-for="item in item.secondCategory" :key="item.cname">
<v-card flat
>
<v-row dense>
<v-col margin-left>
<v-card
class=""
>
<v-row
justify="space-around"
align="center"
no-gutters>
<v-col
v-for="card in item.poster"
:key="card.title"
>
<!-- :cols="card.flex" -->
<v-card
max-width="100"
flat
>
<v-img
max-width="100"
max-height="250"
class="white--text align-end"
contain
:src="card.sampleImgPath"
@click="send(card.sampleImgPath)"
>
</v-img>
<v-card-text
>
<v-row
align="center"
class="mx-0"
max-width="50"
>
{{card.title}}
<van-button
plain hairline
icon="star-o"
size="mini"
type="primary"
@click="collectPoster(card.id,card.title,card.sampleImgPath,card.collectFlag)">
{{ card.collectFlag == "0" ? '取消收藏': '收藏'}}
</van-button>
</v-row>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-card>
</v-col>
</v-row >
</v-card>
</v-tab-item>
</v-tabs-items>
</v-tabs>
</v-card>
</v-tab-item>
</v-tabs-items>整个数据放在一个大数组里,第一级是标题,第二级是标题下的各个二级标题,第三级是二级标题下的各个海报内容,所以要取到各个海报,像三层for循环一样,用v-for一级一级的取值
(1)第一级标题
v-model=tab定位第一级
v-for=item in items :key=item.pname
item代指第一层
(2)第二级标题
v-model=item.subtab 定位第二级
<v-tab v-for=”item in item.secondCategory” :key=”item.cname”>
{
{ item.cname }}
</v-tab>
取第二级所有二级标题在侧边栏展示
item in 第一层的item,此时item指代第二层
(3)循环第二级里的内容
v-model=item.subtab
v-for=item in item.secondCategory :key=item.cname
定位第二级
v-for=card in item.poster
循环取第二级标题里的各个内容
图片属性:src=card.url
取名称{
{card.title}}
3.数据格式
tab: null,
items: [],