商业级web阅读器项目（下）

4.阅读器–阅读进度、目录、全文搜索功能开发

4-1 阅读进度功能实现（进度面板+分页逻辑）

	<template>
	    <transition name="slide-up">
	        <div class="setting-wrapper">
	            <div class="setting-progress">
	                <div class="read-time-wrapper">
	                    <span class="read-time-text">111</span>
	                    <span class="icon-forward"></span>
	                </div>
	                <div class="progress-wrapper">
	                    <div class="progress-icon-wrapper">
	                        <span class="icon-back" @click="prevSection"></span>
	                    </div>
	                    <input class="progress" type="range"
	                           max="100"
	                           min="0"
	                           step="1"
	                           @change="onProgressChange($event.target.value)" @input="onProgressInput($event.target.value)"
	                           :value="progress"
	                           :disabled="!bookAvailable"
	                           ref="progress">
	                    <div class="progress-icon-wrapper">
	                        <span class="icon-forward" @click="nextSection"></span>
	                    </div>
	                </div>
	                <div class="text-wrapper">
	                    <span>{
  {bookAvailable ? progress + '%' : '加载中...'}}</span>
	                </div>
	            </div>
	        </div>
	    </transition>
	</template>
	
	<script>
	    import {
    ebookMixin} from "./../../utils/mixin"
	    export default {
    
	        name: "EbookSettingProgress",
	        mixins:[ebookMixin],
	        data(){
    
	            return{
    
	
	            }
	        },
	        methods:{
    
	            onProgressChange(){
    
	
	            },
	            onProgressInput(){
    
	
	            },
	            prevSection(){
    
	
	            },
	            nextSection(){
    
	
	            }
	        }
	    }
	</script>
	
	<style scoped lang="scss">
	    @import './../../assets/styles/global';
	    .setting-wrapper {
    
	        position: absolute;
	        bottom: px2rem(48);
	        left: 0;
	        z-index: 101;
	        width: 100%;
	        height: px2rem(90);
	        background: white;
	        box-shadow: 0 px2rem(-8) px2rem(8) rgba(0, 0, 0, .15);
	        .setting-progress {
    
	            position: relative;
	            width: 100%;
	            height: 100%;
	            .read-time-wrapper{
    
	                position: absolute;
	                left: 0;
	                top: 0;
                height: px2rem(40);
                width: 100%;
                @include center;
                font-size: px2rem(12);
            }
            .progress-wrapper {
    
                width: 100%;
                height: 100%;
                @include center;
                padding: 0 px2rem(30);
                box-sizing: border-box;
                .progress-icon-wrapper{
    
                    font-size: px2rem(20);
                }
                .progress {
    
                    margin: 0 px2rem(10);
                    width: 100%;
                    -webkit-appearance: none;
                    height: px2rem(2);
                    background: -webkit-linear-gradient(#999, #999) no-repeat, #ddd;
                    background-size: 0 100%!important;
                    &:focus {
    
                        outline: none;
                    }
                    &::-webkit-slider-thumb {
    
                        -webkit-appearance: none;
                        height: px2rem(20);
                        width: px2rem(20);
                        border-radius: 50%;
                        background: white;
                        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .15);
                        border: px2rem(1) solid #ddd;
                    }
                }
            }
            .text-wrapper {
    
                position: absolute;
                left: 0;
                bottom: px2rem(10);
                width: 100%;
                color: #333;
                font-size: px2rem(12);
                text-align: center;
            }
        }
    }
</style>

这是基础界面，还没实现交互功能

接下来 分析分页逻辑
页数会随着字体的大小，以及屏幕的大小改变

this.book.ready.then(()=>{
   
                    return this.book.locations.generate(750 * (window.innerWidth/375)*(getFontSize(this.fileName)/16)) //分页算法
                }).then(locations=>{
   
                    //当分页完毕后，允许拖动进度条
                    this.setBookAvailable(true)
                })

4-2 阅读进度功能实现（进度拖动功能）

主要就是通过progress的值来控制和反应进度条以及当前页数
这是实现的方法

  displayProgress(){
   
                console.log(this.progress);
                const cfi = this.currentBook.</