前言

先看看效果，就一个字，丝滑。

使用的是flipbook-vue，一个vue的开源翻书组件，源地址为：github.com/ts1/flipboo…

什么是flipbook-vue

Flipbook-vue 是一个Viewer 组件库，允许您在图像之间切换，就像在翻书一样。

两对图像表示为一页，实现了像书一样的页面结构。

可以放大图片，并且可以更改翻页的方向。

翻页的光效也十分柔和、流畅。

引入

npm i -S flipbook-vue

或

yarn add flipbook-vue

使用样例

<template>
 <flipbook class="flipbook" :pages="pages" v-slot="flipbook">
    <button @click="flipbook.flipLeft">Previous Page</button>
    <button @click="flipbook.flipRight">Next Page</button>
 </flipbook>
</template>

.flipbook {
   width: 90vw;
   height: 90vh;
}

export default {
   name: 'App',
   data(){
     return {
        pages: [
            null,
           'images/2.jpg',
           'images/3.jpg'
            ],
         }
   },

    components: {
        flipbook 
    }
 }

注意：一定要给图片设置宽度高度，否则显示不出来。

在线调试

codepen.io/lijasper/pe…

props

名称	描述
pages	图片 URL 数组。必传。所有照片比例需要相同。如果第一个元素为空，则单独显示下一个元素（作为封面）。所有其他props都是可选的。
pagesHiRes	翻页动画的持续时间（以毫秒为单位）。默认为 1000。
flipDuration	放大/缩小动画的持续时间（以毫秒为单位）。默认为 500。
zoomDuration	可能的放大率数组。 null 等效于 [1]（无缩放）。默认为 [1, 2, 4]。注意：不要传空数组。
ambient	环境光的强度在 0 到 1 之间。值越小，阴影越多。默认为 0.4。
gloss	镜面光的强度，从0到1，数值越大，光泽度越高。默认为0.6。
perspective	屏幕和查看器之间的 Z 轴距离（以像素为单位）。值越高，效果越小。默认为 2400。
nPolygons	一个页面被水平分割成多少个矩形。较高的值会提供更高质量的渲染以换取性能。默认为 10。
singlePage	无论视口大小如何，都强制使用单页模式。默认为false。
forwardDirection	阅读方向。如果您的文档是从右到左的，请设置此left。默认为right。
centering	启用封面居中。默认为默认为true。
startPage	要打开的页码 (>= 1)。默认为空。
loadingImage	页面加载时显示的图像的 URL。默认使用内部动画 SVG。
clickToZoom	单击或点击放大或缩小。默认为true。
dragToFlip	通过拖动/滑动翻页。默认为true。

Events

名称	描述
flip-left-start	向左翻转动画开始时触发。参数是翻转前的页码。
flip-left-end	向左翻转动画结束时触发。参数是翻转后的页码。
flip-right-start	向右翻转动画开始时触发。参数是翻转前的页码。
flip-right-end	向右翻转动画结束时触发。参数是翻转后的页码。
zoom-start	放大/缩小动画开始时触发。参数是缩放后的放大倍数。
zoom-end	放大/缩小动画结束时触发。参数是缩放后的放大倍数。

其他

要显示更多功能是需要自定义的，比如在当前翻页的页面中，加入视频，文字等元素。需要下载flipbook.js的源码进行二次开发，此组件实现了翻页的样式及动效。

这篇好文章是转载于：学新通技术网