deadcxap/inpx-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Улучшения скроллинга

Browse Source
This commit is contained in:
Book Pauk
2022-08-20 01:06:39 +07:00
parent 0fb86b2174
commit d9a03a7e0d
1 changed files with 86 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
client/components/Search/Search.vue
View File

@@ -1,6 +1,17 @@
<template>
<div class="root column fit">
<div class="tool-panel column bg-green-11">
<div class="col fit" style="position: relative">
<div v-show="loadingVisible" class="fit row justify-center items-center" style="position: absolute; background-color: rgba(0, 0, 0, 0.2); z-index: 1">
<div class="bg-white row justify-center items-center" style="width: 180px; height: 50px; border-radius: 10px; box-shadow: 2px 2px 10px #333333">
<q-spinner color="primary" size="2em" />
<div class="q-ml-sm">
Поиск авторов...
</div>
</div>
</div>
<div ref="scroller" class="col fit column no-wrap" style="overflow: auto; position: relative" @scroll="onScroll">
<div ref="toolPanel" class="tool-panel column bg-green-11" style="position: sticky; top: 0;">
<div class="header q-mx-md q-mt-sm row justify-between items-center">
<div class="row items-center">
<div class="q-mr-xs">
@@ -16,7 +27,7 @@
</div>
<div class="row q-mx-md q-my-sm items-center">
<q-input
ref="authorInput" v-model="author" :maxlength="inputMaxLength" :debounce="inputDebounce"
ref="authorInput" v-model="author" :maxlength="5000" :debounce="inputDebounce"
class="bg-white q-mt-xs" style="width: 300px;" label="Автор" stack-label outlined dense clearable
/>
<div class="q-mx-xs" />
@@ -47,7 +58,7 @@
<div class="q-mx-xs" />
<div class="row items-center q-mt-xs">
<div v-show="queryFound > 0">
Показаны {{ queryFound }} из {{ totalFound }} найденных авторов
Найдено {{ totalFound }} авторов
</div>
<div v-show="queryFound == 0">
Ничего не найдено
@@ -65,17 +76,6 @@
</div>
</div>
<div class="col fit" style="position: relative">
<div v-show="loadingVisible" class="fit row justify-center items-center" style="position: absolute; background-color: rgba(0, 0, 0, 0.2)">
<div class="bg-white row justify-center items-center" style="width: 180px; height: 50px; border-radius: 10px; box-shadow: 2px 2px 10px #333333">
<q-spinner color="primary" size="2em" />
<div class="q-ml-sm">
Поиск авторов...
</div>
</div>
</div>
<div class="col fit column no-wrap" style="overflow: auto">
<div v-for="item in tableData" :key="item.key" style="border-bottom: 1px solid #aaaaaa">
<div class="q-my-sm q-ml-md" style="font-size: 120%">
{{ item.value }}
@@ -201,6 +201,25 @@ class Search {
this.$root.stdDialog.alert('Выбор языка');
}
onScroll() {
const curScrollTop = this.$refs.scroller.scrollTop;
if (!this.lastScrollTop)
this.lastScrollTop = 0;
if (!this.lastScrollTop2)
this.lastScrollTop2 = 0;
if (curScrollTop - this.lastScrollTop > 0) {
this.$refs.toolPanel.style.position = 'relative';
this.$refs.toolPanel.style.top = `${this.lastScrollTop2}px`;
} else if (curScrollTop - this.lastScrollTop < 0) {
this.$refs.toolPanel.style.position = 'sticky';
this.$refs.toolPanel.style.top = 0;
this.lastScrollTop2 = curScrollTop;
}
this.lastScrollTop = curScrollTop;
}
async updateTableData() {
let result = [];