三十三、添加选项按钮及吸顶效果

一、添加正在热映和即将上演选项按钮

（1）创建组件FilmHeader.vue(作为按钮部分)

<template>
    <div>
        <ul>
            <router-link to="/film/nowplaying" tag="li" activeClass="active">正在热映</router-link>
            <router-link to="/film/comingsoon" tag="li" activeClass="active">即将上演</router-link>
        </ul>
    </div>
</template>
<style lang="scss" scoped>
ul{
    display: flex;
    li{
        flex: 1;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background:white;
    }
}
.active{
    color: red;
    border-bottom: 2px solid red;
}
</style>

（2）在Film.vue中引用

（3）效果图

知识点补充：

• tag
  • 类型: string
  • 默认值: "a"
• 有时候想要 <router-link> 渲染成某种标签，例如 <li>。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。 
  <router-link to="/foo" tag="li">foo</router-link>
• <!-- 渲染结果 -->  ：   <li>foo</li>
• active-class
  • 类型: string
  • 默认值: "router-link-active"
• 设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

二、吸顶效果

当页面滚动到一定程度后，固定到顶部（不再显示轮播图）

滚动到一定程度（不再显示轮播图），固定在顶部

（1）思路：

Film.vue

(2)获取滚动距离和轮播高度，并进行比较（Film.vue）

（3）根据isFixed决定是否为ilmheader组件添加样式（Film.vue）

（4）在FilmHeader.vue中定义样式.fixed

（5）效果图

     

（6）修复错误