前言
今天汇总一个需求,还是之前写的,要求写一个满屏的轮播图,准确的说,是鼠标滑动到轮播图的时候,轮播图固定在屏幕上,随着其中的轮播子项遍历结束后,解除固定的效果。原本我最开始想直接修改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>