mirror of
https://github.com/gedoor/legado.git
synced 2024-09-01 09:34:25 +08:00
web: 修复pc端目录滚动
This commit is contained in:
parent
8ea072e1d7
commit
71da77be4c
@ -1,14 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div class="wrapper">
|
||||||
<div
|
<div
|
||||||
|
v-for="cata in catas"
|
||||||
class="cata-text"
|
class="cata-text"
|
||||||
:class="{ selected: isSelected(source.index) }"
|
:key="cata.url"
|
||||||
@click="gotoChapter(source)"
|
:class="{ selected: isSelected(cata.index) }"
|
||||||
|
@click="gotoChapter(cata)"
|
||||||
>
|
>
|
||||||
{{ source.title }}
|
{{ cata.title }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
defineProps(["index", "source", "gotoChapter"]);
|
const props = defineProps(["index", "source", "gotoChapter"]);
|
||||||
|
|
||||||
const store = useBookStore();
|
const store = useBookStore();
|
||||||
|
|
||||||
@ -17,17 +21,26 @@ const index = computed(() => store.readingBook.index);
|
|||||||
const isSelected = (idx) => {
|
const isSelected = (idx) => {
|
||||||
return idx == index.value;
|
return idx == index.value;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 处理pc mobile
|
||||||
|
const catas = computed(() => {
|
||||||
|
return props.source?.catas ?? [props.source];
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.selected {
|
.selected {
|
||||||
color: #eb4259;
|
color: #eb4259;
|
||||||
}
|
}
|
||||||
|
.wrapper {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
.cata-text {
|
.cata-text {
|
||||||
|
width: 100%;
|
||||||
margin-right: 26px;
|
margin-right: 26px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -5,10 +5,10 @@
|
|||||||
style="height: 300px; overflow: auto"
|
style="height: 300px; overflow: auto"
|
||||||
:class="{ night: isNight, day: !isNight }"
|
:class="{ night: isNight, day: !isNight }"
|
||||||
ref="virtualListRef"
|
ref="virtualListRef"
|
||||||
data-key="url"
|
data-key="index"
|
||||||
wrap-class="data-wrapper"
|
wrap-class="data-wrapper"
|
||||||
item-class="cata"
|
item-class="cata"
|
||||||
:data-sources="catalog"
|
:data-sources="virtualListdata"
|
||||||
:data-component="CatalogItem"
|
:data-component="CatalogItem"
|
||||||
:estimate-size="40"
|
:estimate-size="40"
|
||||||
:extra-props="{ gotoChapter }"
|
:extra-props="{ gotoChapter }"
|
||||||
@ -25,7 +25,7 @@ import CatalogItem from "./CatalogItem.vue";
|
|||||||
const store = useBookStore();
|
const store = useBookStore();
|
||||||
|
|
||||||
const isNight = computed(() => theme.value == 6);
|
const isNight = computed(() => theme.value == 6);
|
||||||
const { catalog, popCataVisible } = storeToRefs(store);
|
const { catalog, popCataVisible, miniInterface } = storeToRefs(store);
|
||||||
|
|
||||||
const theme = computed(() => {
|
const theme = computed(() => {
|
||||||
return store.config.theme;
|
return store.config.theme;
|
||||||
@ -40,11 +40,33 @@ const index = computed({
|
|||||||
get: () => store.readingBook.index,
|
get: () => store.readingBook.index,
|
||||||
set: (value) => (store.readingBook.index = value),
|
set: (value) => (store.readingBook.index = value),
|
||||||
});
|
});
|
||||||
const virtualListRef = ref();
|
|
||||||
|
|
||||||
|
const virtualListdata = computed(() => {
|
||||||
|
let catalogValue = catalog.value;
|
||||||
|
if (miniInterface.value) return catalogValue;
|
||||||
|
|
||||||
|
// pc端 virtualListIitem有2个章节
|
||||||
|
let length = Math.ceil(catalogValue.length / 2);
|
||||||
|
let virtualListDataSource = new Array(length);
|
||||||
|
|
||||||
|
let i = 0;
|
||||||
|
while ((i++) < length) {
|
||||||
|
virtualListDataSource[i] = {
|
||||||
|
index: i,
|
||||||
|
catas: catalogValue.slice(2 * i, 2 * i + 2)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return virtualListDataSource;
|
||||||
|
});
|
||||||
|
|
||||||
|
const virtualListRef = ref();
|
||||||
|
const virtualListIndex = computed(() => {
|
||||||
|
if (miniInterface.value) return index.value;
|
||||||
|
return Math.floor(index.value / 2);
|
||||||
|
});
|
||||||
watch(popCataVisible, (visible) => {
|
watch(popCataVisible, (visible) => {
|
||||||
if (visible) return; // 页面可见时,虚拟列表内部sizes Map全为0
|
if (visible) return; // 页面可见时,虚拟列表内部sizes Map全为0
|
||||||
nextTick(() => virtualListRef.value.scrollToIndex(index.value));
|
nextTick(() => virtualListRef.value.scrollToIndex(virtualListIndex.value));
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(["getContent"]);
|
const emit = defineEmits(["getContent"]);
|
||||||
@ -78,12 +100,8 @@ onUpdated(() => {
|
|||||||
border-bottom: 1px solid #ed4259;
|
border-bottom: 1px solid #ed4259;
|
||||||
}
|
}
|
||||||
:deep(.data-wrapper) {
|
:deep(.data-wrapper) {
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
.cata {
|
.cata {
|
||||||
width: 50%;
|
//width: 50%;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font: 16px / 40px PingFangSC-Regular, HelveticaNeue-Light,
|
font: 16px / 40px PingFangSC-Regular, HelveticaNeue-Light,
|
||||||
@ -103,9 +121,4 @@ onUpdated(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 500px) {
|
|
||||||
:deep(.cata) {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user