vue左右滑动翻页效果,vue实现电子书仿真翻页
本文主要介绍vue简单实现书籍翻页效果，有需要的朋友可以参考一下。
无意中，我想用vue作为一本书的组件。我有了这个想法之后，就开始做了。首先我简单的实现了基本效果，为后续的组件封装做准备。为了实现这个效果，我需要使用vue css JavaScript。
关键字
transform
Transform属性应用于元素的2D或3D变换。该属性允许您旋转、缩放、移动、倾斜等。元素。
语法是transform:none * transform-functions *；我们主要是利用它的旋转效果，可以这样写。
变换：旋转(90度)
//表示沿Y轴旋转90度
animation
既然是为了达到动画效果，那就要有动画。
动画属性的语法如下：动画：名称持续时间计时-函数延迟迭代-计数方向填充-模式播放-状态；我们只需要前两个属性，name和duration，它们分别是指定要绑定到选择器的关键帧的名称和动画指定需要多少秒或毫秒完成。我们可以这样写。
动画：fanPre 2s
@keyframes
使用@keyframes规则，您可以创建动画，这些动画通过渐变从一种CSS样式设置为另一种样式。在动画过程中，您可以多次更改CSS样式的设置，并在指定的更改发生时使用%或关键字 from 和 to ，这与0%到100%相同。
语法为：@关键帧*动画名称* {*关键帧-选择器* { * CSS-styles；} *}我们可以这样写
@关键帧fanPre {
0% {
transform:rotateY(0 deg)；
背景色：rgba(122，112，112)；
}
50% {
背景色：rgba(122，112，112)；
}
75% {
背景色：rgba(122，112，112)；
}
100% {
变换：rotateY(-140度)；
背景色：无；
}
}
var
这个var不是JavaScript中的var，而是css中的var。我们可以用它来实现css和vue数据的连续数据交换，vue定义的数据可以用在css中设置属性，如下：
//html
div:style= { -speed :speed } /div
//javascript
道具：{
速度：{
类型：字符串，
默认值：“2s”，
}
}
//css
style vars={ speed，degs } lang=scss 作用域
动画：fanPre var(-speed)；
/风格
实现
知道了上面的关键词，我们就可以开始意识到这个效果了。首先，我们需要一份书页清单。
//书籍页面列表
页面列表：{
类型：数组，
默认值：()={
返回[
{
标题：“关雎”，
正文：[
关关关鸠，在河州。窈窕淑女，君子好逑。
荠菜，左右不齐。窈窕淑女，求之不得。
我很乐意，而且印象深刻。悠闲，辗转反侧。
荠菜，左右不齐。窈窕淑女，钢琴的朋友。
荠菜，左右不齐。窈窕淑女，敲钟敲鼓。
],
},
{
标题：“慢速语音搜索”，
正文：[
寻寻觅觅，冷冷清清，苦不堪言。乍暖还寒的时候，最难休息。三两杯淡酒，怎么可能打败他？太晚了！悲伤的叶言是一个老相识。
黄花堆积满地，憔悴残损。现在谁能挑他们？守着窗户，怎么能一个人摸黑！梧桐在黄昏下着毛毛雨，点点滴滴。这一次，多么悲伤的一句话！
],
},
{
题目：“玉匣元玺”，
正文：[
数千棵树在东方的夜晚开花。刮风了，星星像雨。宝马刻满马路的车。箫声玉壶光，龙鱼舞通宵。
蛾，雪，柳，金线。笑啊笑啊香啊。人群成千上万次寻找他。我回头一看，那个人就在那里，灯光昏暗。
],
},
{
题目：‘爱上一只蝴蝶，靠在危楼上’，
正文：[
伫倚危楼风细细，望极春愁，黯黯生天际。草色烟光残照里，无言谁会凭阑意。,
拟把疏狂图一醉，对酒当歌，强乐还无味。衣带渐宽终不悔，为伊消得人憔悴。,
],
},
{
标题： 雨霖铃秋别，
正文：[
寒蝉凄切，对长亭晚，骤雨初歇。都门帐饮无绪，留恋处，兰舟催发。执手相看泪眼，竟无语凝噎。念去去，千里烟波，暮霭沉沉楚天阔。,
多情自古伤离别，更那堪，冷落清秋节！今宵酒醒何处？杨柳岸，晓风残月。此去经年，应是良辰好景虚设。便纵有千种风情，更与何人说，
],
},
];
},
},
将数据渲染到页面上，如下例子
差异
@click=turnPage(1)
j-book-page
:key= 当前页面-索引
:style=getPageStyle(index)
h3{{ nowPage.title }}/h3
p
v-for=(t，nowPageInd) in nowPage.text
:key=nowPage- nowPageInd
{{ t }}
/p
/div
页面翻页功能实现如下，使用当前页面来记录当前展示页面页数，使用旗来区分是上一页还是下一页翻页，并进行相应的翻页操作。其中要注意对点击事件进行防抖操作，防止翻页过快，具体代码如下：
收费公路（标志){
如果(!this.canTurn)返回；
如果(这个。当前页面=这一页。页面列表。长度)
this.setPage(this.currentPage，flag)；
如果(这个。当前页面。页面列表。长度这个。当前页面0){
这个。能转=假；
setTimeout(()={
这个。能转=真；
}、解析int(这个。速度)* 1000-100)；
}
if (flag===1) {
如果(这个。当前页面。页面列表。长度){
这个. currentPage
this.nextClick=true
this.lastClick=false
}
}否则{
if (this.currentPage 0) {
这个。当前页面-；
this.nextClick=false
this.lastClick=true
}
}
},
完整代码
模板
div class= j-book :style= getBookStyle()
div :style={ - speed: speed，- degs: degs }
差异
j-book-page-pre
@click=turnPage(-1)
v-if=currentPage 0 showCover
div class=j-book-page
h3{{ prePage.title }}/h3
p v-for=(t，textInd)在准备中。 text :key= prePage- textInd
{{ t }}
/p
/div
/div
div class=" j-book-page "
模板pagesList中的v-for=(item，index
差异
@click=turnPage(-1)
翻页，翻页，ani
v-if=当前页面===索引2下一次点击
:key= 第一页-最后一页-索引
:style=getPageStyle(index)
h3{{ item.title }}/h3
项目中的p v-for=(t，itemInd)。 text :key= item- itemInd
{{ t }}
/p
/div
差异
@click=turnPage(-1)
翻页，翻页，ani
v-if=currentPage===1 nextClick
:key= 第一页-最后一页-索引
:style=getPageStyle(index)
h3{{ cover.title }}/h3
p v-for=(t，coverInd)in cover。 text :key= cover- coverInd
{{ t }}
/p
/div
差异
@click=turnPage(1)
j-book-page-page-pre-ani
v-if=lastClick currentPage===0
:key= 页面-当前前一页索引
:style=getPageStyle(5)
h3{{ cover.title }}/h3
p v-for=(t，coverInd)in cover。 text :key= cover-0- coverInd
{{ t }}
/p
/div
差异
@click=turnPage(1)
j-book-page-page-pre-ani
v-if=上次点击当前页面===索引1
:key=page-pre-索引
:style=getPageStyle(5)
h3{{ item.title }}/h3
p v-for=(t，itemInd)in item . text :key= item-0- itemInd
{{ t }}
/p
/div
差异
@click=turnPage(1)
j-book-page
:key= 当前页面-索引
:style=getPageStyle(index)
h3{{ nowPage.title }}/h3
p
v-for=(t，nowPageInd) in nowPage.text
:key=nowPage- nowPageInd
{{ t }}
/p
/div
/模板
/div
/div
/div
/模板
脚本
导出默认值{
名称：书，
道具：{
宽度：{
类型：数量，
默认值：300，
},
高度：{
类型：数量，
默认值：400，
},
速度：{
类型：字符串，
默认值：“2s”，
},
//书籍页面列表
页面列表：{
类型：数组，
默认值：()={
返回[
{
标题：“关雎”，
正文：[
关关关鸠，在河州。窈窕淑女，君子好逑。
荠菜，左右不齐。窈窕淑女，求之不得。
我很乐意，而且印象深刻。悠闲，辗转反侧。
荠菜，左右不齐。窈窕淑女，钢琴的朋友。
荠菜，左右不齐。窈窕淑女，敲钟敲鼓。
],
},
{
标题：“慢速语音搜索”，
正文：[
寻寻觅觅，冷冷清清，苦不堪言。乍暖还寒的时候，最难休息。三两杯淡酒，怎么可能打败他？太晚了！悲伤的叶言是一个老相识。
黄花堆积满地，憔悴残损。现在谁能挑他们？守着窗户，怎么能一个人摸黑！梧桐在黄昏下着毛毛雨，点点滴滴。这一次，多么悲伤的一句话！
],
},
{
题目：“玉匣元玺”，
正文：[
数千棵树在东方的夜晚开花。刮风了，星星像雨。宝马刻满马路的车。箫声玉壶光，龙鱼舞通宵。
蛾，雪，柳，金线。笑啊笑啊香啊。人群成千上万次寻找他。我回头一看，那个人就在那里，灯光昏暗。
],
},
{
题目：‘爱上一只蝴蝶，靠在危楼上’，
正文：[
在倚危楼，风细，望春愁，天暗。在青草和烟雾的照耀下，没有人能说出没有意义的话。
有人提议一醉方休，以酒为歌，但强乐无味。衣服越来越宽，你永远不会后悔，你会为此憔悴。
],
},
{
题目：“雨凌琳秋别”，
正文：[
寒心，凉亭晚了，阵雨早了。在京都城外设送别，却没有喝酒的心情，恋恋不舍地离开，船上的人一直催促着出发。手牵着手看着对方，泪水在眼眶里打转，直到最后没有言语，千言万语哽在喉咙里说不出来。远去，千里烟波，黄昏沉沉，天高云阔。
自古多情伤离别，多此可比，冷落清秋节！谁知道我今晚清醒时在哪里？恐惧只是边缘，面对悲伤的晨风和残月的残阳。这是很长一段时间，相爱的人都不在一起，我甚至期望满足于名存实亡的好天气，好风景。纵使风情万种，你又向谁诉说，
],
},
];
},
},
//书籍封面
封面：{
类型：对象，
默认值：()={
返回{
标题：“封面”，
正文：[封面]，
};
},
},
},
data() {
返回{
当前页面：0，
nextClick:假，
lastClick: false，
准备：{}，
nowPage: {}，
坎特纳：没错，
度数：“0度”，
showCover:假的，
};
},
已安装(){
this . init()；
},
方法：{
init() {
this . now page=this . cover；
},
getBookStyle() {
设RES=“”；
RES= width: this . width px；；
RES= height: this . height px；；
RES= -speed : this . speed ；；
RES= transform:rotate( this . degs )；；
返回res
},
getPageStyle(index) {
设RES=
RES= z-index:(这个。页面列表。长度索引)“；”；
返回表示留数
},
设置页面（页面，标志){
if (flag===-1) {
这个。prepage=this。页面列表[第3页] 此。封面；
这个。现在page=this。页面列表[第1页]；
}否则{
这个。prepage=this。页面列表[第2页] 此。封面；
this.nowPage=
这个。pageslist[page] this。pageslist[this。页面列表。长度-1]；
}
设速度=这.速度
速度=parseInt(速度)* 1000-500;
setTimeout(()={
if (this.currentPage===1) {
this.showCover=true
}
if (this.currentPage===0) {
this.showCover=false
}
if (flag===-1) {
这个。现在page=this。pages列出[这个。当前页-1] 本。封面；
if (this.currentPage===0) {
this.degs= 0deg
}
}否则{
这个。degs=-5度；
这个。prepage=this。pages列出[这个。当前页-2] 本。封面；
}
},速度);
},
收费公路（标志){
如果(!this.canTurn)返回；
如果(这个。当前页面=这一页。页面列表。长度)
this.setPage(this.currentPage，flag)；
如果(这个。当前页面。页面列表。长度这个。当前页面0){
这个。能转=假；
setTimeout(()={
这个。能转=真；
}、解析int(这个。速度)* 1000-100)；
}
if (flag===1) {
如果(这个。当前页面。页面列表。长度){
这个. currentPage
this.nextClick=true
this.lastClick=false
}
}否则{
if (this.currentPage 0) {
这个。当前页面-；
this.nextClick=false
this.lastClick=true
}
}
},
},
};
/脚本
style vars={ speed，degs } lang=scss 作用域。电子书{
背景色：灰色；
位置：相对；
方框阴影：30px 0px 30px rgb(0，0，0，0.6)插图；
转换：旋转(var(-degs))；
颜色：# dec38f。j-book-page-pre {
位置：绝对；
宽度：100%;
身高：100%;
z指数：2;
背景尺寸：100%;
变换-原点：左；
border-top-left-radius:2px；
border-bottom-left-radius:2px；
背景色：rgba(122，112，112)；
变换：rotateY(-140度);j-book-page {
位置：绝对；
宽度：100%;
身高：100%;
}
}。j-book-page {
位置：绝对；
宽度：100%;
身高：100%;翻页-前ani {
位置：绝对；
宽度：100%;
身高：100%;
z指数：2;
背景尺寸：100%;
变换-原点：左；
border-top-left-radius:2px；
border-bottom-left-radius:2px；
变换：旋转(0度)；
动画：fanPre var(-速度)；
}
@关键帧fanPre
0% {
变换：rotateY(-140度);
背景色：rgba(122，112，112)；
}
50% {
背景色：rgba(122，112，112)；
}
100% {
变换：旋转(0度)；
背景色：无；
}
}。翻页-阿尼{
位置：绝对；
宽度：100%;
身高：100%;
z指数：2;
背景尺寸：100%;
变换-原点：左；
border-top-left-radius:2px；
border-bottom-left-radius:2px；
变换：rotateY(-140度);
动画：粉丝var( -速度);
}
@关键帧扇{
0% {
变换：旋转(0度)；
背景色：无；
}
100% {
变换：rotateY(-140度);
背景色：rgba(122，112，112)；
}
}。j-book-page {
位置：绝对；
宽度：100%;
身高：100%;
top:0；
h3 {
文本对齐：居中；
}
p {
}
}
}。j-book-btns {
位置：绝对；
底部：0;
显示器：flex
justify-content:space-around；
宽度：100%;
}
}
/风格
更多VUE特效，请查看下面的相关链接。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。