使用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></slot></div><img class="jz left-jz" src="../assets/questions/jz1.png" alt="左卷轴" :style="{left: jzLeft}" /><img class="jz right-jz" src="../assets/questions/jz2.png" alt="右卷轴" :style="{right: jzRight}" /></div></div>
</template>

设置C居中的代码如下：

/*** 处理内部展开卷轴的移动位置* 展开卷轴的宽度-可见区域的宽度，再除以2得到的值就是内部卷轴应该向左移动的位置* 随着可见区域的扩大，向左移动位置应该动态改变，保证卷轴处于中间位置*/handleTransform() {let viewWidth = this.$refs.view.clientWidth; // 可见区域的宽度let scrollWidth = this.$refs.reel.clientWidth; // 获取展开卷轴的宽度let translateX = (scrollWidth - viewWidth) / 2;this.scrollStyle = {transform: "translateX(-" + translateX + "px)"};}

样式代码如下：

<style lang="less" scoped>
.c-reel {position: absolute;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -65%);width: 100%;height: 6rem;.view {position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 0.88rem;height: 100%;overflow: hidden;.content {width: 100vw;height: 100%;background: url("../assets/questions/jz.png") no-repeat center;background-size: 100% 100%;overflow: hidden;position: relative;}}.jz {position: absolute;top: 0;width: 0.44rem;height: 100%;&.left-jz {left: 0;}&.right-jz {right: 0;}}
}
</style>

详细代码请看这里

欢迎关注博主：小圣贤君，有问题可以留言哦~

使用vue开发一个双向展开的卷轴组件相关推荐

[vue] 使用vue开发一个todo小应用，谈下你的思路
[vue] 使用vue开发一个todo小应用,谈下你的思路结构: 输入部分( input )和输出部分( ul ) 逻辑:用户输入之后,通过事件触发拿到用户输入的数据存起来, 将用户数据集合通过 v ...
java计算机毕业设计vue开发一个简单音乐播放器（附源码、数据库）
java计算机毕业设计vue开发一个简单音乐播放器(附源码.数据库) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ec ...
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署本源码技 ...
java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署本源 ...
Vue 开发一个简略版的飞机大战小游戏
文章目录使用 Vue 开发一个简略版的飞机大战小游戏一.实现思路二.所需知识点三.实现步骤使用 Vue 开发一个简略版的飞机大战小游戏如题,假设你为了向更多访问你博客的人展示你的技术,你决 ...
go build 无文件_Go之Gin+Vue开发一个线上外卖应用
我们将开始使用Gin框架开发一个api项目,我们起名为:云餐厅.如同饿了么,美团外卖等生活服务类应用一样,云餐厅是一个线上的外卖应用,应用的用户可以在线浏览商家,商品并下单. 该项目分为客户端和服务端 ...
JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库本源码技术栈: 项目 ...
vue开发一个实用美观的轮播图组件
网上有不少vue开发的轮播图资源,相信读者也看过不少,这里笔者开发了一个轮播图组件,简单美观实用. 先上示例图: 常见的轮播图都是占满屏幕的形式,像上图所示的轮播图虽然经常见到,但是在一些常见的轮播组 ...
基于 Vue 开发一个多人聊天室（万字长文） - 从 0 到 1 篇
前言在上个月初,接到一个需求,要开发一个聊天通讯模块并且集成到项目中的多个入口,实现业务数据的记录追踪. 接到需求后,还挺开心,这是我第一次搞通讯类的需求,之前一直是 B 端的业 ...

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

使用vue开发一个双向展开的卷轴组件相关推荐

最新文章

热门文章