Vue 满屏纵向轮播图

前言

    今天汇总一个需求，还是之前写的，要求写一个满屏的轮播图，准确的说，是鼠标滑动到轮播图的时候，轮播图固定在屏幕上，随着其中的轮播子项遍历结束后，解除固定的效果。原本我最开始想直接修改Element-UI的组件的，但是里面一些内容非常不容易控制，最后终究是按照自己的需求重新写了一个。下面是最终效果展示。

轮播图效果展示

具体实现

实现思路

    首先整个轮播图所在位置即第二个部分，由两个部分组成，一个是 标题+左侧图片+右侧导航栏的固定部分，另一个是右边可以上下滑动的文字滚动部分。整个第二部分高度为三个轮播子项的高度综合。

    实现屏幕固定的核心思路就是给项目添加一个滚动监听器，当鼠标滚动到起始位置，即第二部分顶端位于屏幕顶端的时候，给固定部分添加 position：fixed 属性； 当滚动到终止位置，即最后一个子项的下边界与屏幕底部重叠的时候，给固定部分移除屏幕固定效果。

具体代码

<template>
  <div class="platform-container">
      <div class="first-page">
            <div class="title-box">
                <div class="title">第一部分</div>
            </div>
      </div>
      <div class="second-page" ref="secondPage">
            <div class="top-box" ref="topBox">
                <div class="title" >第二部分</div>
                <div class="control">
                    <div class="circle" :class="{'active': currentIndex === key}"  v-for="(item,key) in 3" :key="key" @click="changeItem(key)"></div>
                </div> 
                <div class="backImg">
                	<!-- 这里可以自定义固定的背景图片，我这里懒得弄了，直接填了纯色，虽然纯色看不出来背景也一起固定了  -->
                </div>
                <div class="image-box">
                    <div v-for="(item,key) in 3" :key="key">
                        <img class="rightImg" :class="{rightImg_active : currentIndex === key}" src="./assets/logo.svg" alt="图片展示失败"> 
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="box-background" v-for="(item,key) in characterData" :key="key">
                    <div class="item" :style="getItemStyle(key)">
                        <div class="content-box">
                            <div class="subtitle">{
  {item.title}}</div>
                        </div>