读书项目：阅读器翻页功能实现

 TouchEvent事件

• 在changeTouches当中有几根手指就有几条数据

pageX clientX screenX的区别

• pageX/pageY：鼠标相对于整个页面的X/Y坐标
  • 整个页面的意思就是你整个网页的全部，比如说网页很宽很长，宽2000px，高3000px，那pageX,pageY的最大值就是它们了
  • IE不支持
• clientX/clientY：事件发生时鼠标在浏览器内容区域的X/Y坐标（不包含滚动条）
  • 浏览器内容区域即浏览器窗口中用来显示网页的可视区域，注意这个可视，也就是说需要拖动滚动条才能看到的区域不算
  • 当你将浏览器窗口缩小时，clientX/clientY的最大值也会缩小，但始终，它们的最大值不会超过你浏览器可视区域
  • IE下此属性不规范，它们的最小值不是0而是2，也就是说IE下的clientX/clientY比火狐下始终大2px
• screenX/screenY：鼠标在屏幕上的坐标。screenX,screenY的最大值不会超过屏幕分辨率

时间戳

可以用来判断两次操作的间隔时间

这里规定不大于500ms，手指长按时不做确认

EbookReader.vue

<template>
    <div class="ebook-reader">
        <div id="read"></div>
    </div>
</template>

<script>
//http://localhost:8080/#/ebook/Laws|2015_Book_ProtectingTheRightsOfPeopleWit
import {mapGetters} from 'vuex';
import Epub from 'epubjs';

global.ePub = Epub;
export default {
    computed: {
        ...mapGetters(['fileName'])
    },
    methods: {
        prevPage () {
            if (this.rendition) {
                this.rendition.prev();
            }
        },
        nextPage () {
            if (this.rendition) {
                this.rendition.next();
            }
        },
        toggleTitleAndMenu () {},
        initEpub() {
            const url = 'http://localhost:8081/epub/' + this.fileName + '.epub';
            this.book = new Epub(url);
            this.rendition = this.book.renderTo('read', {
                width: window.innerWidth,
                height: window.innerHeight
            });
            this.rendition.display();
            this.rendition.on('touchstart', (event) => {
                this.touchStartX = event.changedTouches[0].clientX;
                this.touchTime = event.timeStamp;
            });
            this.rendition.on('touchend', (event) => {
                const offsetX = event.changedTouches[0].clientX - this.touchStartX; //手指滑动偏移量
                const time = event.timeStamp - this.touchTime; //手指滑动时间

                if (time < 500 && offsetX > 40) {
                    this.prevPage();
                } else if (time < 500 && offsetX < -40) { //滑动时间小于500ms 滑动距离大于40,向下翻页
                    this.nextPage();
                } else {
                    this.toggleTitleAndMenu();
                }
            });
        }
    },
    mounted() {
        const fileName = this.$route.params.fileName.split('|').join('/');
        this.$store.dispatch('setFileName', fileName).then(() => {
            this.initEpub();
        });
    },
}
</script>

<style lang="scss" scoped>

</style>