Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：电影导航组件
目录
电影导航组件
开始做电影导航组件。
创建导航组件
在mycomponents/films下创建FilmHeader.vue组件。
内容如下：
<template>
<ul>
<router-link to="/films/nowplaying" custom v-solt="{ navigate, isActive }">
<li @click="navigate" :class="isActive ? 'tabActive' : ''">
正在热映
</li>
</router-link>
<router-link to="/films/comingsoon" custom v-solt="{ navigate, isActive }">
<li @click="navigate" :class="isActive ? 'tabActive' : ''">
即将热映
</li>
</router-link>
</ul>
</template>使用组件
引入和注册
在FilmsView.vue中引入和局部注册。
引入
import filmHeader from '@/mycomponents/films/FilmHeader'局部注册
components: {
filmSwiper,
filmSwiperItem,
filmHeader
}使用导航
在filmsView.vue中使用注册的导航组件。
示例如下：
<template>
<div>
<!-- 增加判断 数据加载完成后渲染 -->
<film-swiper :key="datalist.length">
<film-swiper-item v-for="data in datalist" :key="data.orderIndex" class="filmSwiperItem">
<img :src="data.imgUrl | getImg" alt="">
</film-swiper-item>
</film-swiper>
<film-header></film-header>
<router-view></router-view>
</div>
</template>样式设置
Tabbar.vue
把类样式从app.vue 迁移到tabbar.vue中。
.tabActive {
color:red;
}
电影导航组件样式
在filmsHeader.vue中最下面，示例如下：
<style lang="scss" scoped>
ul {
display: flex;
height: 2.7222rem;
line-height: 2.7222rem;
li {
flex: 1;
text-align: center;
}
}
.tabActive {
color:red;
border-bottom: 2px solid red;
}
</style>改到span上设置下划线样式
<template>
<ul>
<router-link to="films/nowplaying" custom v-slot="{ navigate, isActive }">
<li @click="navigate">
<span :class="isActive ? 'tabActive' : ''">正在热映</span>
</li>
</router-link>
<router-link to="films/comingsoon" custom v-slot="{ navigate, isActive }">
<li @click="navigate">
<span :class="isActive ? 'tabActive' : ''">即将热映</span>
</li>
</router-link>
</ul>
</template>总结
Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：电影导航组件