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的值来控制和反应进度条以及当前页数
这是实现的方法