zm/nuttyreading-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0309 听书

Browse Source
This commit is contained in:
@fawn-nine
2023-03-09 17:13:31 +08:00
parent aeed8684b1
commit 45cb5d66f7
8 changed files with 367 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

291
pages/yRead/angbook.vue
View File

@@ -55,13 +55,14 @@
<view class="verticalbox" :class="{ container0: background === 1, container1: background === 2 }"
@click="showMenu">
<!-- 章节名 -->
<view class="chapter">{{ verticalData.chapterName }}</view>
<scroll-view scroll-y="true" :scroll-top="scrollTop" scroll-with-animation="true" style="height: 600px;"
@scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower" @scroll="scroll">
<view class="content">
<view class="chapter">{{ verticalData.chapterName }}</view>
<scroll-view :scroll-anchoring="true" scroll-y="true" :scroll-top="scrollTop" scroll-with-animation="true" style="height: 600px; "
@scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower" @scroll="scroll" @touchend="touchEnd" @touchstart="touchStart">
<view class="content">
<view class="inner-box" :style="{ height: `${innerHeight}px` }" v-if="verticalData.canRead">
<view>
<p class="book-inner" :class="highlight === index ? 'highlight' : ''"
<p
class="book-inner" :class="highlight === index ? 'highlight' : ''"
v-for="(item, index) in verticalData.text" :key="index" v-html="item.picAndWord"
:style="{
fontWeight: item.level == 2 ? 'bold' : item.level == 3 ? 'bold' : '',
@@ -109,14 +110,15 @@
<!-- 内层class="inner-box"利用innerHeight将内容截取至整行，防止文字不完整的情况出现 -->
<view class="inner-box" :style="{ height: `${innerHeight}px` }" v-if="prePage.canRead">
<!-- 最里层class="book-inner"的用于获取文本总高度，计算总页数，注意不可以overflow:hidden -->
<view class="book-inner" v-for="(item, index) in prePage.text" :key="index" v-html="item"
:style="{
fontWeight: item.level == 2 ? 'bold' : item.level == 3 ? 'bold' : '',
fontSize: `${fontSize}px`,
lineHeight: `${lineHeight * fontSize}px`,
color: `${colorList[background - 1]}`,
transform: `translateY(0)`
}"></view>
<view class="book-inner" >
<p v-for="(item, index) in curPage.text" v-html="item.list" :key="index"
:class="highlight === item.paragraph ? 'highlight' : ''"
:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }"></p>
</view>
</view>
<view
style="display:flex;flex-flow: column;justify-content: center;align-items: center;height: 100%;"
@@ -149,9 +151,14 @@
<view class="chapter">{{ curPage.chapterName }}</view>
<view class="content">
<view class="inner-box" :style="{ height: `${innerHeight}px` }" v-if="curPage.canRead">
<view class="book-inner" :class="fhighlight== true ? 'fhighlight' : ''"
v-for="(item, index) in curPage.text" :key="index" v-html="item"
:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }">
<view class="book-inner" >
<!-- <pre>
{{curPage.text}}
</pre> -->
<p v-for="(item, index) in curPage.text" v-html="item.list" :key="index"
:class="highlight === item.paragraph ? 'highlight' : ''"
:style="{fontSize: `${fontSize}px`, lineHeight: `${lineHeight * fontSize}px`, color: `${colorList[background - 1]}`, transform: `translateY(0px)` }"></p>
</view>
</view>
<view
@@ -247,8 +254,7 @@
<view :style="{ height: `${statusBarHeight}px` }"></view>
<view class="head">
<image class="backiconfont" @click="back" src="../../static/icon/back.svg" mode="aspectFit"></image>
<!-- <text decode="true">&lt;</text> -->
<image class="backiconfont" @click="back" src="../../static/icon/back.svg" mode="aspectFit"></image>
</view>
</view>
<!-- 菜单主体 -->
@@ -312,8 +318,8 @@
@click="changeTurnType(0)">覆盖</view>
<view class="icon" :class="{ active: turnType === 1 }" style="padding: 5px 8px;"
@click="changeTurnType(1)">左右平移</view>
<view class="icon" :class="{ active: turnType === 2 }" style="padding: 5px 8px;"
@click="changeTurnType(2)">上下平移</view>
<!-- <view class="icon" :class="{ active: turnType === 2 }" style="padding: 5px 8px;"
@click="changeTurnType(2)">上下平移</view> -->
</view>
<view class="item">
<view class="item-name">背景</view>
@@ -366,6 +372,7 @@
precent: null,
updateReadId: null
},
scrollTop1:0,
bookName: '我是书名',
bookId: 1,
bookId_mark: '',
@@ -581,13 +588,24 @@
...mapState(['userInfo']),
},
methods: {
// scroll1: function(e) {
// // console.log(e)
// // this.old.scrollTop = e.detail.scrollTop
// },
// upper: function(e) {
// console.log(e)
// },
// lower: function(e) {
// console.log(e)
// },
// view的滑动事件
scroll: function(e) {
// this.oldType = "Vertical"
// console.log(e)
this.scrollTop = e.detail.scrollTop
// console.log(e.detail)
// this.scrollTop = e.detail.scrollTop
// this.scrollTop1 = e.detail.scrollTop
// 计算当前的page
this.page = parseInt(e.detail.scrollTop / (this.NumCol * this.lineHeight * this.fontSize))
// this.page = parseInt(e.detail.scrollTop / (this.NumCol * this.lineHeight * this.fontSize))
},
bookMessage() {
@@ -618,31 +636,33 @@
// 拆分数据
forGet(colSize, NumCol) {
let that = this
let arr = [] //数组每一项代表一行
let arr = [] //数组每一项代表一行
// console.log(copyBookText,'拆分前')
copyBookText.map((res, index) => {
res.picAndWord = ' ' + res.picAndWord
if (res.picAndWord.length > colSize) {
arr.push(res.picAndWord.substr(0, colSize))
arr.push({'paragraph':index,'list':res.picAndWord.substr(0, colSize), 'level':0})
let text = res.picAndWord.substr(colSize)
that.aginForget(text, arr, colSize)
that.aginForget(text, arr, colSize, index)
} else {
arr.push(res.picAndWord.substr(0, colSize))
arr.push({'paragraph':index,list:res.picAndWord.substr(0, colSize), 'level':0})
}
})
copyBookText = arr
// console.log(copyBookText,'copyBookText')
this.getSizePage(NumCol)
},
//获取后面的字符，再去计算能放几行
aginForget(text, arr, colSize) {
aginForget(text, arr, colSize, index) {
let that = this;
let strBR = "</br>"
if (text.length > colSize) {
arr.push(text.substr(0, colSize))
let newText = text.substr(colSize)
that.aginForget(newText, arr, colSize)
arr.push({'paragraph':index,'list':text.substr(0, colSize), 'level':0})
let newText = text.substr(colSize)
that.aginForget(newText, arr, colSize, index)
} else {
arr.push(text.substr(0, colSize))
arr.push({'paragraph':index,'list':text.substr(0, colSize),'level':0})
// arr.push(strBR)
}
},
@@ -669,7 +689,7 @@
}
arr.push(newArr)
copyBookText = arr // 每一页显示的内容
// console.log(copyBookText,'copyBookText')
console.log(copyBookText,'copyBookText')
},
setStorage() {
@@ -852,7 +872,7 @@
this.history.chapterIndex = 0
}
await this.getThreeChapter(this.history.chapterIndex)
this.counlSystemInfo()
// this.counlSystemInfo()
let page = Math.floor((this.curChapter.totalPage - 1) * this.history.progress)
this.goToPage(page)
uni.hideLoading()
@@ -904,12 +924,12 @@
setTimeout(() => {
const query = uni.createSelectorQuery().in(this);
query.select('#curChapter').boundingClientRect(data => {
let height = data.height;
let height = data.height;
// #ifdef APP-PLUS || MP-WEIXIN
height = Math.round(height * this.pixelRatio) / this.pixelRatio
// #endif
this.curChapter.totalPage = Math.ceil(height / this.innerHeight) || 1
// this.curChapter.totalPage = Math.floor(height / this.innerHeight) || 1
this.curChapter.totalPage = copyBookText.length
this.curChapter.ready = true //章节准备完毕
resolve()
}).exec();
@@ -973,25 +993,6 @@
this.down = false
}, 300)
},
/**
* 滑动事件
**/
onScroll(e) {
this.sliderValue = Number(((e.detail.scrollTop / (this.contentHeight - (this.windowHeight - 100))) * 100))
if (!isAudioMenu) {
this.scrollTop = e.detail.scrollTop
}
let page = Number(((e.detail.scrollTop / (this.contentHeight - (this.windowHeight - 100))) * 100))
// console.log(page,66)
// if(page != this.page){
// console.log(page,66)
// this.goToPage(page) // 跳转到制定页面
// }
},
/**
* 听书事件
**/
@@ -1007,21 +1008,19 @@
})
if (this.domList.length > 0) {
console.log('读取到数据，继续执行');
} else {
console.log('读取到的数据为空，进行赋值');
this.domList = data;
}
// this.getNowReadIndex()
this.createAudio()
this.musicManuShow = false
this.isAudioMenu = true
this.getNowReadIndex()
// this.$nextTick(()=>{
// this.createAudio()
// })
}).exec();
},
getNowReadIndex() {
let progress = this.progress //记录阅读进度用于调整字体后跳转
getNowReadIndex() {
let progress = this.progress //记录阅读进度用于调整字体后跳转
// let page = Math.floor((this.curChapter.totalPage - 1) * progress)
let page = 0
let history = uni.getStorageSync('history')
@@ -1029,61 +1028,60 @@
page = 0
} else {
page = Math.floor((this.curChapter.totalPage - 1) * progress)
}
}
// console.log(this.curChapter.totalPage, 'curChapter')
// 通过page 判断当前读到了哪里
// console.log(page+1, '当前页')
// console.log(copyBookText[page][0],'顶部第一句话')
let nowRead = copyBookText[page][0]
let nowReadIndex = 0
let nowRead = copyBookText[page][0].list
console.log(nowRead,'顶部第一句话')
//let nowReadIndex = 0
//console.log(page,'page')
if (page == 0) {
// return this.scrollTop = 0
this.domIndex = 0
this.createAudio()
this.musicManuShow = false
this.isAudioMenu = true
}else{
let found = false
this.verticalData.text.forEach((item, itemIndex) => {
if (item.content.indexOf(copyBookText[page][0]) != -1) {
if (page == 1) {
return this.scrollTop = 0
} else {
let topOfsset = Number(this.fontSize * this.NumCol * this.lineHeight * page)
this.scrollTop = topOfsset
}
return nowReadIndex = itemIndex
// console.log(copyBookText[page][0][0],'copyBookText')
//console.log(item.content,'item')
if (item.content.indexOf(nowRead) != -1) {
// 找到了
console.log(item.number,'找到了')
found = true
this.domIndex = itemIndex
this.createAudio()
this.musicManuShow = false
this.isAudioMenu = true
return
}
})
// console.log(this.scrollTop,'距离顶部距离')
this.domIndex = nowReadIndex
// this.scrollTop = Number((this.NumCol * this.lineHeight * this.fontSize * this.page) / 100)
if(!found){
uni.showToast({
title:'未找到音频',
icon:'none',
duration:2000
})
}
}
},
// 创建音频
createAudio() {
this.domList.map((item, index) => {
if (item.top >= this.scrollTop && this.scrollTop >= item.bottom) {
return this.domIndex = index
}
}
)
console.log('读到的位置', this.domIndex);
this.music = uni.createInnerAudioContext()
this.music.src = this.verticalData.text[this.domIndex].voices; // static文件夹下的音频地址
console.log(this.verticalData.text, '文本')
// 找到对应dom
console.log(this.scrollTop, '滚动后的top值')
console.log(this.verticalData.text, '文本')
// 找到符合条件的dom
console.log('domList', this.domList)
console.log('scrollTop', this.scrollTop)
// 获取当前的页码
//let page = Math.ceil(((this.scrollTop / (this.windowHeight - 100)) * 10)) - 1
//console.log(page,'当前的页码')
//this.goToPage(page)
console.log('domList', this.domList)
// 给对应dom高亮
this.highlight = this.domIndex
this.fhighlight = true
console.log('highlight', this.highlight);
console.log('domIndex', this.domIndex);
console.log('domIndex', this.domIndex);
// 判断是否有src
if (this.music.src) {
setTimeout(() => {
@@ -1101,9 +1099,18 @@
});
},
// 加载下一条音频
addDomIndex() {
addDomIndex(page) {
this.domIndex += 1
this.createAudio()
//console.log(this.domIndex, '下一条domIndex')
//console.log(this.curPage.text, '最大值')
setTimeout(()=>{
this.createAudio()
if(this.domIndex > this.curPage.text[this.curPage.length -1].paragraph){
console.log(this.curPage.text[this.curPage.length -1].paragraph)
this.goNextPage()
}
},2000)
},
// 暂停事件
audioPause() {
@@ -1204,6 +1211,7 @@
this.touchStartX = e.touches[0].clientX;
this.touchY = e.touches[0].clientY;
this.touchStartY = e.touches[0].clientY;
// console.log(touchStartY, '触摸开始')
if (this.turnType === 0) {
// this.$refs.pageBackRef.$el.style.transition = 'unset'
@@ -1263,12 +1271,10 @@
this.touchY = e.touches[0].clientY;
// console.log(this.delta, 'delta')
}
if (this.next && this.nextPage.ready) { //首次翻下一页之后
if (this.nextPage.isEnd) {
return
}
// 限制边界
if (delta > 0) {
delta = 0
@@ -1479,7 +1485,12 @@
delta = e.changedTouches[0].clientX - this.touchStartX;
} else {
delta = e.changedTouches[0].clientY - this.touchStartY;
console.log(delta, '触摸')
console.log(delta, '触摸结束')
this.scrollTop += -delta
console.log(this.scrollTop, 'scrollTop')
this.page = parseInt(this.scrollTop / (this.NumCol * this.lineHeight * this.fontSize))
console.log(this.page, 'page')
//this.getNowReadIndex()
}
if ((delta < 0.8 && delta > -0.8)) { //部分手机点击屏幕时无法做到delta===0
@@ -1788,6 +1799,7 @@
}
this.currentPage += 1
let showChapter = false
console.log(this.currentPage,this.curChapter.totalPage)
if (this.currentPage === this.curChapter.totalPage) { //翻至下一章了
showChapter = true
this.currentPage = 0
@@ -1867,15 +1879,17 @@
if (type === 'next') {
this.preChapter = Object.assign({}, this.curChapter)
this.curChapter = Object.assign({}, this.nextChapter)
console.log(this.curChapter)
copyBookText = this.curChapter.text;
console.log(this.curChapter.chapterIndex, 'chapterIndex')
copyBookText = this.curChapter.text;
this.counlSystemInfo()
console.log(copyBookText,1111111111)
if (this.curChapter.chapterIndex !== this.directoryList.length - 1) { //最后一章是根据目录列表长度判断
this.nextChapter = {
ready: false,
chapterIndex: this.curChapter.chapterIndex + 1,
chapterName: this.directoryList[this.curChapter.chapterIndex + 1].name,
}
}
await this.getOneChapter(this.directoryList[this.curChapter.chapterIndex + 1].chapterId)
this.$set(this.nextChapter, 'text', this.tmpChapter.text)
this.$set(this.nextChapter, 'canRead', this.tmpChapter.canRead)
@@ -1884,14 +1898,16 @@
this.nextChapter = {
ready: true,
isEnd: true
}
}
}
}
this.getThreeChapter(this.curChapter.chapterIndex)
}
if (type === 'pre') {
this.nextChapter = Object.assign({}, this.curChapter)
this.curChapter = Object.assign({}, this.preChapter)
copyBookText = this.curChapter.text;
this.counlSystemInfo()
copyBookText = this.curChapter.text;
this.counlSystemInfo()
if (this.curChapter.chapterIndex !== 0) {
this.preChapter = {
ready: false,
@@ -1902,12 +1918,14 @@
this.$set(this.preChapter, 'text', this.tmpChapter.text)
this.$set(this.preChapter, 'canRead', this.tmpChapter.canRead)
this.calcPreChapter()
} else {
} else {
this.preChapter = {
ready: true,
isCover: true
}
}
}
this.getThreeChapter(this.curChapter.chapterIndex)
}
},
@@ -1970,7 +1988,6 @@
})
return
}
if (this.isVertical) {
if (this.curChapter.chapterIndex > 0) {
uni.showLoading({
@@ -1978,7 +1995,8 @@
})
setTimeout(() => {
this.getThreeChapter(this.curChapter.chapterIndex - 1)
this.counlSystemInfo()
// this.counlSystemInfo()
console.log(copyBookText,'翻页后')
uni.hideLoading()
}, 300)
} else {
@@ -2012,6 +2030,7 @@
this.currentPage = page
this.showAnimation = false
console.log(page, '======>')
// console.log(copyBookText[page],'当前页')
this.$nextTick(function() {
this.curPage = {
ready: this.curChapter.ready,
@@ -2029,20 +2048,7 @@
})
// console.log(copyBookText[page][0],'顶部第一句话')
let nowRead = copyBookText[page][0]
let nowReadIndex = 0
this.verticalData.text.forEach((item, itemIndex) => {
if (item.content.indexOf(copyBookText[page][0]) != -1) {
if (page == 1) {
return this.scrollTop = 0
} else {
let topOfsset = Number(this.fontSize * this.NumCol * this.lineHeight * page)
this.scrollTop = topOfsset
}
return nowReadIndex = itemIndex
}
})
// console.log(this.scrollTop,'翻页后的顶部距离')
let nowReadIndex = 0
this.domIndex = nowReadIndex
this.setStorage() // 设置缓存
if (this.currentPage === 0) {
@@ -2248,7 +2254,6 @@
}
if (turnType == 2) {
this.oldType = "Vertical"
// 获取当前的domIndex
this.getNowReadIndex()
this.isVertical = true
@@ -2345,6 +2350,7 @@
})
.then(res => {
this.tmpChapter.text = res.bookCatalogue
// console.log(this.tmpChapter.text,'tmpChapter')
})
.catch(() => {
// 此处是网络连接失败的逻辑
@@ -2389,9 +2395,9 @@
chapterName: this.directoryList[Number(index)].name,
text: this.tmpChapter.text,
canRead: this.tmpChapter.canRead
}
console.log(this.verticalData)
}
copyBookText = this.curChapter.text;
this.counlSystemInfo()
this.domIndex = 0;
if (this.curChapter.chapterIndex !== 0) {
await this.getOneChapter(this.directoryList[Number(index) - 1].chapterId)
@@ -2409,6 +2415,7 @@
}
if (this.curChapter.chapterIndex !== this.directoryList.length - 1) {
await this.getOneChapter(this.directoryList[Number(index) + 1].chapterId)
this.nextChapter = {
chapterIndex: Number(index) + 1,
@@ -2424,7 +2431,7 @@
}
await this.calcCurChapter()
await this.calcPreChapter()
await this.calcNextChapter()
await this.calcNextChapter()
},
/*
获取进度
@@ -2530,7 +2537,7 @@
<style lang="scss" scoped>
@import url("@/pages/yRead/iconfont.css");
.scroll-Y{height: 600px;}
page {
position: relative;
width: 100%;
@@ -2627,16 +2634,16 @@
.inner-box {
.book-inner {}
.highlight {
}
}
}
.highlight {
color: #e5d6a0 !important;
// padding: 10rpx 20rpx;
// border-radius: 10rpx;
// background-color: #cbcbcb;
}
}
}
}
.fhighlight {}
.container {