Scrollend event

This commit is contained in:
Jiiks 2018-11-26 11:32:22 +02:00
parent cfc197cdc0
commit d5d7709c9f
3 changed files with 24 additions and 10 deletions

View File

@ -10,7 +10,7 @@
<template>
<div class="bd-settingswrap">
<ScrollerWrap>
<ScrollerWrap :scrollend="scrollend">
<div class="bd-settingswrapHeader">
<span class="bd-settingswrapHeaderText">{{ headertext }}</span>
<slot name="header" />
@ -27,7 +27,7 @@
import { ScrollerWrap } from '../common';
export default {
props: ['headertext'],
props: ['headertext', 'scrollend'],
components: {
ScrollerWrap
}

View File

@ -9,7 +9,7 @@
*/
<template>
<SettingsWrapper headertext="Themes">
<SettingsWrapper headertext="Themes" :scrollend="scrollend">
<div class="bd-tabbar" slot="header">
<div class="bd-button" :class="{'bd-active': local}" @click="showLocal">
<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)" />
</div>
<div v-if="!local" class="bd-onlinePh">
<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 class="bd-onlinePhHeader">
<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 v-if="loadingOnline" class="bd-spinnerContainer">
<div class="bd-spinner7"></div>
<div class="bd-onlinePhBody" v-if="!loadingOnline && onlineThemes">
<RemoteCard v-if="onlineThemes && onlineThemes.docs" v-for="theme in onlineThemes.docs" :key="theme.id" :item="theme" />
</div>
<RemoteCard v-else-if="onlineThemes && onlineThemes.docs" v-for="theme in onlineThemes.docs" :key="theme.id" :item="theme"/>
</div>
</div>
</SettingsWrapper>
@ -117,6 +121,9 @@
searchInput(e) {
if (this.loadingOnline) return;
this.refreshOnline();
},
scrollend(e) {
console.log('scrollend');
}
}
}

View File

@ -10,7 +10,7 @@
<template>
<div class="bd-scrollerWrap" :class="{'bd-dark': dark}">
<div class="bd-scroller">
<div class="bd-scroller" @scroll="onscroll">
<slot/>
</div>
</div>
@ -18,6 +18,13 @@
<script>
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>