使用vue开发一个双向展开的卷轴组件

最新推荐文章于 2025-05-28 15:11:13 发布

原创

最新推荐文章于 2025-05-28 15:11:13 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#卷轴 #vue卷轴组件 #卷轴组件 #双向卷轴

我们在项目实践中，偶尔会为了增加页面内容的显示效果，使用卷轴展开的形式展示页面内容，以此来增加良好的交互和趣味性，卷轴的展开方式有两种，一种是向左或者向右单向展开，另一种是从中间向两边双向展开。
单向展开的卷轴实现起来相对比较容易，笔者不做讲解，这里笔者主要说明双向卷轴的实现。
先上效果图，感兴趣的继续，没兴趣的过。
在这里插入图片描述
思路：
1.显示未展开状态下的显示样式。
2.显示完全展开状态下的显示样式。
3.解决展开中状态下卷轴布始终居中问题和未展开部分隐藏问题。
1和2都非常简单，重点是3，咱们先解决未展开部分隐藏问题，这里笔者需要有个空间容器的概念，以ABC来举例：
A是房子，B是窗户，C是一张比窗户大的画布，那么我们想象站在房子外看窗户，肯定只能看到部分画布，这时，假设窗户可以逐渐变大，最终的效果我们就可以全部的画布。这里窗户就是卷轴的可见区域，窗户周围的画布我们看不到overflow:hidden,因此我们的元素层级为A包含B，B包含C。B处于A的中间位置，这个容易控制，居中设置就可以，C比B大，而且还要显示中间，所以C要相对于B进行定位，top:0;left:0;再来一个transform:translateX()将C向左移动就可以将C置于中间显示位置。
因为C是相对于B的定位，所以当B的大小变化时，C的移动就需要动态变化，不断更改移动的位置，以此来保证C位于B的显示中间。这里笔者使用了定时间，不断更改B的宽度大小和C的移动距离。
结构代码如下：

<template>
  <div class="c-reel">
    <div class="view" ref="view" :style="{width: viewWidth}">
      <div class="content" ref="reel" :style="scrollStyle">
        <slot><