Vue 电影导航组件

​Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：电影导航组件

目录

电影导航组件

创建导航组件

使用组件

引入和注册

使用导航

样式设置

Tabbar.vue

电影导航组件样式

总结

---

电影导航组件

开始做电影导航组件。

创建导航组件

在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的移动端项目：电影导航组件