标签：计算 ota 条目 ble pos javascrip sele 书签 inner
<component :is="currentTab === 1 ? content : bookmark"></component>
目录条目上面是图书信息，分为三个部分 左中右，分别为 图书图片、图书信息、图书进度，水平布局（依然是先html再css），同时这里也用到了国际化（后面就不再重复了，反正有文字的地方都会用到）；此处也要获得读书时间，所以直接将获取读书时间文本的函数放到mixin里，换成分钟的时间放到book.js里（静态方法？）
布局仍然使用flex布局，注意这里用到了 设置font-size为0解决div自带内边距问题，详见：
export function flatten (array) {
return [].concat(...array.map(item => [].concat(item, ...flatten(item.subitems))))
}
const navItem = flatten(nav.toc)
function find (item, level) {
return !item.parent ? level : find(navItem.filter(parentItem => parentItem.id === item.parent)[0], ++level)
}
navItem.forEach(item => {
item.level = find(item, 0)
})
refresh () {
if (this.$refs.scrollWrapper) {
this.$refs.scrollWrapper.style.height = window.innerHeight - realPx(this.top) - realPx(this.bottom) + ‘px‘
this.$refs.scrollWrapper.addEventListener(‘scroll‘, this.handleScroll)
}
}
scroll、touchmove、touchstart等事件被触发的时候，我们通常会去preventDefault()掉它们的默认行为，但直接这样会导致页面卡顿 详见 vue事件修饰符，所以使用@scroll.passive=‘函数‘来绑定事件
同时要在钩子函数mounted里，调用refresh以及对初始位置进行设置，里面用到了\(nextTick函数用来在dom有变化后异步调用回调，保证数据变化引起的dom变化全部相应完毕 详见[vue中\)nextTick函数（异步dom更新）](https://www.cnblogs.com/TRY0929/p/13617122.html)
滚动条样式里，要注意的是 加上了两个属性值得关注：
-webkit-overflow-scrolling: touch;：属性控制元素在移动设备上是否使用滚动回弹效果.
auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。
touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。（属性本身好像容易出bug）
// 不显示浏览器默认的滚动条
&::-webkit-scrollbar {
display: none;
}
v-for循环navigation里的项就可以了，注意一下，这里一行内文字也显示不完，但是直接加上ellipsis又会超出宽度，有个小技巧，在外层盒子加上flex布局，内层哪一行写上flex: 1，即为自动填充
对多级目录进行缩进，我们刚刚以及计算出每个条目的level，现在定义一个函数 每多一层level缩进多15px，再动态绑定样式到v-for的item上 :style="contentItemStyle(item)"
contentItemStyle (item) {
return {
‘margin-left‘: `${px2rem(item.level * 15)}rem`
}
}
当前显示章节条目高亮，这里直接动态绑定class selected即可，条件是当前的index和当前vuex中的section是否一致（这两者刚好含义是一样的）
有时候可能会发现，当字体设置为14px后，有些英文字母无法完全显示（如y、g），这时因为某些字体的原因，英文开发时常见盒子问题，因此这里设置行高略高于字体大小
点击条目进行跳转，这里直接利用book.js中的display(href)方法即可，专门用于跳转到某个特定的href界面的，但这里在跳转的同时要将标题栏菜单栏隐藏，不直接修改display函数，而是设置回调函数，在回调里面调用hideTitleAndMenu
getSectionName () {
return this.section ? this.navigation[this.section].label : ‘‘
}
[].concat.apply([], results))就将results这个二维数组变成一维了。这里其实是 利用了apply函数的第二个参数是 以数组的方式传入形参，所以就是将results里每个元素当作形参传进来了，利用concat合并即可。doSearch (q) {
return Promise.all(
this.currentBook.spine.spineItems.map(item => item.load(this.currentBook.load.bind(this.currentBook))
.then(item.find.bind(item, q)).finally(item.unload.bind(item)))
).then(results => Promise.resolve([].concat.apply([], results)))
}
search () {
if (this.searchText && this.searchText.length > 0) {
this.doSearch(this.searchText).then(results => {
this.searchList = results
}).then(() => {
if (this.searchList.length > 0) {
this.searchList.map(item => {
// 注意这里要赋值
item.excerpt = item.excerpt.replace(this.searchText, `<span class="content-search-text">${this.searchText}</span>`)
return item
})
}
})
}
}
displayContent (target, highlight = false) {
this.display(target, () => {
this.hideTitleAndMenu()
})
if (highlight) {
this.currentBook.rendition.annotations.highlight(target)
}
}
（这里的动画效果不是通过放一张动图，而是自己控制css来实现 真的吓死了）
标签：计算 ota 条目 ble pos javascrip sele 书签 inner
原文地址：https://www.cnblogs.com/TRY0929/p/13620695.html
