欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

第四章

程序员文章站 2022-03-22 10:28:38
4-1.阅读器的需求分析4-2.阅读器的解析和渲染 1.解压需要的电子书到Nginx目录2.新建一个入口文件3.建动态路由组件EbookReader.vue,接收动态路由4.利用vuex传递fileName,拼出url5.引入epubjs实例化一个对象,利用renderTo方法进行电子书渲染4-3.阅读器翻页功能实现1电子书实现原理,利用iframe2.epubjs提供了on方法,让我们可以将事件绑定到iframe上3.分析要用到的event数据4....

4-1.阅读器的需求分析

4-2.阅读器的解析和渲染

 1.解压需要的电子书到Nginx目录	

第四章

2.新建一个入口文件

第四章

3.建动态路由组件EbookReader.vue,接收动态路由

第四章

4.利用vuex传递fileName,拼出url

第四章

5.引入epubjs实例化一个对象,利用renderTo方法进行电子书渲染

第四章

4-3.阅读器翻页功能实现

1电子书实现原理,利用iframe

第四章

2.epubjs提供了on方法,让我们可以将事件动态的绑定到iframe上

第四章

3.分析要用到的event数据

第四章

第四章

4.获取手持操作的X轴偏移量和手持操作时间

第四章

5.翻阅功能实现

第四章
第四章

4-4.标题栏和菜单栏的实现

1.新建EbookTitle.vue和EbookMenu.vue两个文件,并且引入到index.vue入口文件中,copy免费课的源码,对结构和样式进行适当修改

第四章

2.新建一个变量menuVisible,通过Vuex传值,利用EbookReader.vue里面定义的ToggleTitleAndMenu方法改变menuVisiblede的值实现在点击的时候菜单栏和标题栏的显示和隐藏

第四章

3.引入免费课中的transition过度动画

第四章

4.在EbookReader.vue文件里新建hideTitleAndMenu方法,在翻页功能中进行引用 ,实现在翻页的时候标题栏和菜单栏的显示和隐藏

第四章

5.利用vuex和mixin实现vue组件间的解耦和复用

第四章
第四章

6.将mapActions方法也方入mixin中,实现代码更高层度的复用

第四章

4-5.字号设置UI实现

1.创建EbookSettingFont.vue组件实现字号设置面板,并且引入到Ebook menu.vue中;
  在vuex中创建变量settingVisible,实现字号设置面板的显示和隐藏。

第四章

2.在EbookMenu.vue中实现showSetting方法

第四章

3.在utils目录下新建book.js文件,在book.js对静态变量进行存储

第四章

第四章

4.对字号设置面板的阴影和高度进行设置

第四章

5.实现首次进入,菜单栏上的字号设置面板隐藏,点击以后才出现	

第四章

4-6. 字号设置功能实现

1.在vuex中新建变量cuurentBook,将this.book写入到vuex当中

第四章

第四章

第四章

4-7.字体设置功能实现

1.结构

第四章
对样式进行修改
第四章

4-8.字体设置弹窗UI实现

1.新建一个字体弹窗组件EbookSettingFontPopup.vue,并且引入到EbookMenu.vue中

第四章

通过showSettingFamily方法改变fontFamilyVisible的值,实现字体设置弹窗的显示

第四章
第四章

字体弹窗的结构,给向下图标添加点击事件,实现弹出框的隐藏

第四章

hide方法的实现

第四章

相应的样式实现

第四章
第四章

设置过度动画及时间

第四章
第四章

定义字体列表

第四章
第四章

字体列表结构

第四章
第四章

第四章
第四章

第四章

4-9.字体设置弹窗功能实现

1.字体设置面板的隐藏

第四章

给选中字体条目添加点击事件

第四章

添加setFontFamily方法,实现字体的切换

第四章
第四章

第四章

在阅读器文件引入外部的字体css样式,引入方法如下:

第四章
第四章

字体加载完以后还想做一些其他操作,通过promise.all()方法

第四章

第四章

第四章

表示静态资源的资源路径必须以VUE_APP开头(静态资源不需要引入)

第四章
第四章

4-10.字号和字体设置离线缓存

安装web-storage-cache包

第四章
第四章
第四章
第四章
第四章

本文地址:https://blog.csdn.net/zpfnext/article/details/107534455

相关标签: 读书WEB APP