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>