deadcxap/liberama
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Поправки поведения при скроллинге

Browse Source
This commit is contained in:
Book Pauk
2022-07-12 17:33:03 +07:00
parent 0efbaf643a
commit 7ffcd3fe1b
1 changed files with 41 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
client/components/Reader/RecentBooksPage/RecentBooksPage.vue
View File

@@ -15,6 +15,10 @@
<q-icon name="la la-caret-right" class="icon" :class="{'expanded-icon': showSameBook}" color="green-8" size="24px" /> <q-icon name="la la-caret-right" class="icon" :class="{'expanded-icon': showSameBook}" color="green-8" size="24px" />
</q-btn> </q-btn>
<q-btn class="bg-white" rounded style="width: 35px; height: 35px; margin: 6px 6px 0px 6px" @click="scrollToActiveBook">
<q-icon name="la la-location-arrow" color="green-8" size="24px" />
</q-btn>
<q-input <q-input
ref="input" v-model="search" ref="input" v-model="search"
outlined dense outlined dense
@@ -247,8 +251,11 @@ class RecentBooksPage {
//this.$refs.input.focus();//плохо на планшетах //this.$refs.input.focus();//плохо на планшетах
}); });
this.updateTableData();//no await (async() => {
this.scrollToActiveBook();//no await this.showBar();
await this.updateTableData();
await this.scrollToActiveBook();
})();
} }
loadSettings() { loadSettings() {
@@ -474,10 +481,21 @@ class RecentBooksPage {
return false; return false;
} }
showBar() {
this.lastScrollTop1 = this.$refs.vsContainer.scrollTop;
this.$refs.header.style.position = 'sticky';
this.$refs.header.style.top = 0;
}
onScroll() { onScroll() {
const curScrollTop = this.$refs.vsContainer.scrollTop; const curScrollTop = this.$refs.vsContainer.scrollTop;
if (curScrollTop - this.lastScrollTop1 > 150) { if (this.lockScroll) {
this.lastScrollTop1 = curScrollTop;
return;
}
if (curScrollTop - this.lastScrollTop1 > 100) {
this.$refs.header.style.top = `-${this.$refs.header.offsetHeight}px`; this.$refs.header.style.top = `-${this.$refs.header.offsetHeight}px`;
this.$refs.header.style.transition = 'top 0.2s ease 0s'; this.$refs.header.style.transition = 'top 0.2s ease 0s';
@@ -503,24 +521,28 @@ class RecentBooksPage {
} }
async scrollToActiveBook() { async scrollToActiveBook() {
await this.$nextTick(); this.lockScroll = true;
try {
let activeIndex = -1; let activeIndex = -1;
let activeParentIndex = -1; let activeParentIndex = -1;
for (let i = 0; i < this.tableData.length; i++) { for (let i = 0; i < this.tableData.length; i++) {
const book = this.tableData[i]; const book = this.tableData[i];
if (book.active) if (book.active)
activeIndex = i; activeIndex = i;
if (book.activeParent) if (book.activeParent)
activeParentIndex = i; activeParentIndex = i;
if (activeIndex >= 0 && activeParentIndex >= 0) if (activeIndex >= 0 && activeParentIndex >= 0)
break; break;
} }
const index = (activeIndex >= 0 ? activeIndex : activeParentIndex); const index = (activeIndex >= 0 ? activeIndex : activeParentIndex);
if (index >= 0) { if (index >= 0) {
this.$refs.virtualScroll.scrollTo(index, 'center'); this.$refs.virtualScroll.scrollTo(index, 'center');
}
} finally {
await utils.sleep(100);
this.lockScroll = false;
} }
} }