前端册本翻页结果

前端册本翻页结果

前端实现翻书结果，附带vue源码
源码下载地址

媒介

实际业务开发中，偶然候会遇到必要在前端页面内实现翻书结果的需求，本篇文章就为大家介绍如何利用vue实现前端翻书结果，包罗鼠标拖动/点击实现翻页，通过按钮实现翻页等功能，下面给出核心代码示例。完整代码请移步之下载页面下载
代码示例

创建模板页面

创建13个页面，每个页面是一张图片，全部图片资源同一放置在源码包内。

1. <template>
2. <!--  创建id为book的书籍容器，内部包含13个页面-->
3.   <div id="book">
4.     <div><img src="./assets/img/00.jpg" alt=""></div>
5.     <div><img src="./assets/img/11.jpg" alt=""></div>
6.     <div><img src="./assets/img/12.jpg" alt=""></div>
7.     <div><img src="./assets/img/21.jpg" alt=""></div>
8.     <div><img src="./assets/img/22.jpg" alt=""></div>
9.     <div><img src="./assets/img/31.jpg" alt=""></div>
10.     <div><img src="./assets/img/32.jpg" alt=""></div>
11.     <div><img src="./assets/img/41.jpg" alt=""></div>
12.     <div><img src="./assets/img/42.jpg" alt=""></div>
13.     <div><img src="./assets/img/51.jpg" alt=""></div>
14.     <div><img src="./assets/img/52.jpg" alt=""></div>
15.     <div><img src="./assets/img/61.jpg" alt=""></div>
16.     <div><img src="./assets/img/62.jpg" alt=""></div>
17.   </div>
18. </template>

复制代码

css样式

1. html,body, #app{
2.   width: 100%;
3.   height: 100%;
4.   overflow: hidden;
5.   padding: 30px;
6. }
8. #app {
9.   margin: 0 auto;
10.   padding: 2rem;
11.   font-weight: normal;
12. }

复制代码

编写js代码

初始化翻书节点，包含配置项字段，如册本宽高、位置等字段，还可以监听翻书事故，比如当前册本翻到第几页、正在翻页、翻页结束等事故

1. $("#book").turn({
2.     width: 1280,
3.     height: 720,
4.     // 自动居中
5.     autoCenter: true,
6.     // 翻页速度，默认600ms
7.     duration: 1000,
8.     // 展示方式，single：单页展示，double：双页展示
9.     display: "double",
10.     // 开启硬件加速
11.     acceleration: true,
12.     when: {
13.       start: function (e, page, view) {
14.         // 开始翻页时
15.       },
16.       turning: function (e, page, view) {
17.         // 正在翻页
18.       },
19.       turned: function (e, page, view) {
20.         // 翻页完成
21.         console.log(e); // 事件对象
22.         console.log(page); // 翻到第几页 4
23.         console.log(view); //当前展示那几页 是一个数组 [4,5]
24.       }
25.     }
26.   });

复制代码

通过按钮实现上一页下一页

1.         // 通过点击事件实现书籍的翻页功能
2.         $("#prev").click(function () {
3.           // 上一页
4.           $("#book").turn("previous");
5.         })
6.         $("#next").click(function () {
7.           // 下一页
8.           $("#book").turn("next");
9.         })

复制代码

结论

通过上述简朴的几行代码，就可以轻松实现翻书结果，除此之后页面内容还可以利用vue组件，这里不再赘述。
大家有任何题目都可批评区留言或私信，相互交流学习！