Улучшения скроллинга
This commit is contained in:
Book Pauk
@@ -1,72 +1,7 @@
|
||||
<template>
|
||||
<div class="root column fit">
|
||||
<div class="tool-panel column bg-green-11">
|
||||
<div class="header q-mx-md q-mt-sm row justify-between items-center">
|
||||
<div class="row items-center">
|
||||
<div class="q-mr-xs">
|
||||
Коллекция
|
||||
</div>
|
||||
<div class="clickable" @click="showCollectionInfo">
|
||||
{{ collection }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="q-ml-md">
|
||||
{{ projectName }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-mx-md q-my-sm items-center">
|
||||
<q-input
|
||||
ref="authorInput" v-model="author" :maxlength="inputMaxLength" :debounce="inputDebounce"
|
||||
class="bg-white q-mt-xs" style="width: 300px;" label="Автор" stack-label outlined dense clearable
|
||||
/>
|
||||
<div class="q-mx-xs" />
|
||||
<q-input
|
||||
v-model="series" :maxlength="inputMaxLength" :debounce="inputDebounce"
|
||||
class="bg-white q-mt-xs" style="width: 200px;" label="Серия" stack-label outlined dense clearable
|
||||
/>
|
||||
<div class="q-mx-xs" />
|
||||
<q-input
|
||||
v-model="title" :maxlength="inputMaxLength" :debounce="inputDebounce"
|
||||
class="bg-white q-mt-xs" style="width: 200px;" label="Название" stack-label outlined dense clearable
|
||||
/>
|
||||
<div class="q-mx-xs" />
|
||||
<q-input
|
||||
v-model="genre" :maxlength="inputMaxLength" :debounce="inputDebounce"
|
||||
class="bg-white q-mt-xs" style="width: 200px;" label="Жанр" stack-label outlined dense clearable readonly
|
||||
@click="selectGenre"
|
||||
/>
|
||||
<div class="q-mx-xs" />
|
||||
<q-input
|
||||
v-model="lang" :maxlength="inputMaxLength" :debounce="inputDebounce"
|
||||
class="bg-white q-mt-xs" style="width: 80px;" label="Язык" stack-label outlined dense clearable readonly
|
||||
@click="selectLang"
|
||||
/>
|
||||
<div class="q-mx-xs" />
|
||||
<q-btn round dense style="height: 20px" color="info" icon="la la-question" @click="showSearchHelp" />
|
||||
|
||||
<div class="q-mx-xs" />
|
||||
<div class="row items-center q-mt-xs">
|
||||
<div v-show="queryFound > 0">
|
||||
Показаны {{ queryFound }} из {{ totalFound }} найденных авторов
|
||||
</div>
|
||||
<div v-show="queryFound == 0">
|
||||
Ничего не найдено
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="q-mx-xs" />
|
||||
<div class="col row justify-end q-mt-xs">
|
||||
<q-select
|
||||
v-model="limit" :options="limitOptions" class="bg-white"
|
||||
dropdown-icon="la la-angle-down la-sm"
|
||||
outlined dense emit-value map-options
|
||||
/>
|
||||
</div>
|
||||
</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 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">
|
||||
@@ -75,7 +10,72 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col fit column no-wrap" style="overflow: auto">
|
||||
<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">
|
||||
Коллекция
|
||||
</div>
|
||||
<div class="clickable" @click="showCollectionInfo">
|
||||
{{ collection }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="q-ml-md">
|
||||
{{ projectName }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-mx-md q-my-sm items-center">
|
||||
<q-input
|
||||
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" />
|
||||
<q-input
|
||||
v-model="series" :maxlength="inputMaxLength" :debounce="inputDebounce"
|
||||
class="bg-white q-mt-xs" style="width: 200px;" label="Серия" stack-label outlined dense clearable
|
||||
/>
|
||||
<div class="q-mx-xs" />
|
||||
<q-input
|
||||
v-model="title" :maxlength="inputMaxLength" :debounce="inputDebounce"
|
||||
class="bg-white q-mt-xs" style="width: 200px;" label="Название" stack-label outlined dense clearable
|
||||
/>
|
||||
<div class="q-mx-xs" />
|
||||
<q-input
|
||||
v-model="genre" :maxlength="inputMaxLength" :debounce="inputDebounce"
|
||||
class="bg-white q-mt-xs" style="width: 200px;" label="Жанр" stack-label outlined dense clearable readonly
|
||||
@click="selectGenre"
|
||||
/>
|
||||
<div class="q-mx-xs" />
|
||||
<q-input
|
||||
v-model="lang" :maxlength="inputMaxLength" :debounce="inputDebounce"
|
||||
class="bg-white q-mt-xs" style="width: 80px;" label="Язык" stack-label outlined dense clearable readonly
|
||||
@click="selectLang"
|
||||
/>
|
||||
<div class="q-mx-xs" />
|
||||
<q-btn round dense style="height: 20px" color="info" icon="la la-question" @click="showSearchHelp" />
|
||||
|
||||
<div class="q-mx-xs" />
|
||||
<div class="row items-center q-mt-xs">
|
||||
<div v-show="queryFound > 0">
|
||||
Найдено {{ totalFound }} авторов
|
||||
</div>
|
||||
<div v-show="queryFound == 0">
|
||||
Ничего не найдено
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="q-mx-xs" />
|
||||
<div class="col row justify-end q-mt-xs">
|
||||
<q-select
|
||||
v-model="limit" :options="limitOptions" class="bg-white"
|
||||
dropdown-icon="la la-angle-down la-sm"
|
||||
outlined dense emit-value map-options
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 = [];
|
||||
|
||||
|
||||
Reference in New Issue
Block a user