Scrollend event
This commit is contained in:
parent
cfc197cdc0
commit
d5d7709c9f
|
@ -10,7 +10,7 @@
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="bd-settingswrap">
|
<div class="bd-settingswrap">
|
||||||
<ScrollerWrap>
|
<ScrollerWrap :scrollend="scrollend">
|
||||||
<div class="bd-settingswrapHeader">
|
<div class="bd-settingswrapHeader">
|
||||||
<span class="bd-settingswrapHeaderText">{{ headertext }}</span>
|
<span class="bd-settingswrapHeaderText">{{ headertext }}</span>
|
||||||
<slot name="header" />
|
<slot name="header" />
|
||||||
|
@ -27,7 +27,7 @@
|
||||||
import { ScrollerWrap } from '../common';
|
import { ScrollerWrap } from '../common';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: ['headertext'],
|
props: ['headertext', 'scrollend'],
|
||||||
components: {
|
components: {
|
||||||
ScrollerWrap
|
ScrollerWrap
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<SettingsWrapper headertext="Themes">
|
<SettingsWrapper headertext="Themes" :scrollend="scrollend">
|
||||||
<div class="bd-tabbar" slot="header">
|
<div class="bd-tabbar" slot="header">
|
||||||
<div class="bd-button" :class="{'bd-active': local}" @click="showLocal">
|
<div class="bd-button" :class="{'bd-active': local}" @click="showLocal">
|
||||||
<h3>Installed</h3>
|
<h3>Installed</h3>
|
||||||
|
@ -26,13 +26,17 @@
|
||||||
<ThemeCard v-for="theme in localThemes" :theme="theme" :key="theme.id" :data-theme-id="theme.id" @toggle-theme="toggleTheme(theme)" @reload-theme="reload => reloadTheme(theme, reload)" @show-settings="dont_clone => showSettings(theme, dont_clone)" @delete-theme="unload => deleteTheme(theme, unload)" />
|
<ThemeCard v-for="theme in localThemes" :theme="theme" :key="theme.id" :data-theme-id="theme.id" @toggle-theme="toggleTheme(theme)" @reload-theme="reload => reloadTheme(theme, reload)" @show-settings="dont_clone => showSettings(theme, dont_clone)" @delete-theme="unload => deleteTheme(theme, unload)" />
|
||||||
</div>
|
</div>
|
||||||
<div v-if="!local" class="bd-onlinePh">
|
<div v-if="!local" class="bd-onlinePh">
|
||||||
<div class="bd-fancySearch" :class="{'bd-disabled': loadingOnline, 'bd-active': loadingOnline || (onlineThemes && onlineThemes.docs)}">
|
<div class="bd-onlinePhHeader">
|
||||||
<input type="text" class="bd-textInput" placeholder="Search" @keydown.enter="searchInput" @keyup.stop/>
|
<div class="bd-fancySearch" :class="{'bd-disabled': loadingOnline, 'bd-active': loadingOnline || (onlineThemes && onlineThemes.docs)}">
|
||||||
|
<input type="text" class="bd-textInput" placeholder="Search" @keydown.enter="searchInput" @keyup.stop />
|
||||||
|
</div>
|
||||||
|
<div v-if="loadingOnline" class="bd-spinnerContainer">
|
||||||
|
<div class="bd-spinner7"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="loadingOnline" class="bd-spinnerContainer">
|
<div class="bd-onlinePhBody" v-if="!loadingOnline && onlineThemes">
|
||||||
<div class="bd-spinner7"></div>
|
<RemoteCard v-if="onlineThemes && onlineThemes.docs" v-for="theme in onlineThemes.docs" :key="theme.id" :item="theme" />
|
||||||
</div>
|
</div>
|
||||||
<RemoteCard v-else-if="onlineThemes && onlineThemes.docs" v-for="theme in onlineThemes.docs" :key="theme.id" :item="theme"/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</SettingsWrapper>
|
</SettingsWrapper>
|
||||||
|
@ -117,6 +121,9 @@
|
||||||
searchInput(e) {
|
searchInput(e) {
|
||||||
if (this.loadingOnline) return;
|
if (this.loadingOnline) return;
|
||||||
this.refreshOnline();
|
this.refreshOnline();
|
||||||
|
},
|
||||||
|
scrollend(e) {
|
||||||
|
console.log('scrollend');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="bd-scrollerWrap" :class="{'bd-dark': dark}">
|
<div class="bd-scrollerWrap" :class="{'bd-dark': dark}">
|
||||||
<div class="bd-scroller">
|
<div class="bd-scroller" @scroll="onscroll">
|
||||||
<slot/>
|
<slot/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -18,6 +18,13 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: ['dark']
|
props: ['dark', 'scrollend'],
|
||||||
|
methods: {
|
||||||
|
onscroll(e) {
|
||||||
|
if (!this.scrollend) return;
|
||||||
|
const { offsetHeight, scrollTop, scrollHeight } = e.target;
|
||||||
|
if (offsetHeight + scrollTop >= scrollHeight) this.scrollend(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue