А как сделать скрытие всего компонента svelte? <script> let visible

Question

Svelte [svelt] - All about Svelte JavaScript framework.

А как сделать скрытие всего компонента svelte? <script> let visible

= true;
</script>
{#if visible}
<p>Some text</p>
{/if}
Не работает и требует перед if вставить хоть какой-нибудь html, а надо просто не вставлять ничего в DOM, если компонент невидимый

#programming #russian #svelte

0

09.12.2020

16 ответов

22 просмотра

Eugene Ilyin Автор вопроса

Danny
А нет варианта вынести if на уровень выше, где ком...

Нет это Navigation Bottom, который вешает сам себя на скролл let visible = true let prevScrollPos = window.pageYOffset const handleScroll = event => { let thisScrollPos = window.pageYOffset visible = thisScrollPos < prevScrollPos prevScrollPos = thisScrollPos } onMount(() => window.addEventListener('scroll', handleScroll)) onDestroy(() => window.removeEventListener('scroll', handleScroll))

0

09.12.2020

Valexr

Eugene Ilyin
Нет это Navigation Bottom, который вешает сам себя...

svelte:window on:scroll bind:scrollY ?

0

09.12.2020

Mark Tanashchuk 🇺🇦

В смысле не работает 0о

0

09.12.2020

Eugene Ilyin Автор вопроса

Mark Tanashchuk 🇺🇦
В смысле не работает 0о

В том смысле что код что я приветл требует хоть какого-то html иначе svelte пишет invalid mustache и не собирает компонент

0

09.12.2020

Mark Tanashchuk 🇺🇦

Eugene Ilyin
В том смысле что код что я приветл требует хоть ка...

https://svelte.dev/repl/7da7c5a5ae044549ab39aac5a652c862?version=3.31.0

0

09.12.2020

Eugene Ilyin Автор вопроса

Valexr
svelte:window on:scroll bind:scrollY ?

Спасибо поменяю на svelte:window! Но это конечно не решает основной проблемы в нетеребоньканьем DOM если нечего отображать

0

09.12.2020

Valexr

Valexr
svelte:window on:scroll bind:scrollY ?

Так свелтовее или action, но в вашем кейсе достаточно внутри компонента юзать svelte:window

0

09.12.2020

Valexr

Eugene Ilyin
Спасибо поменяю на svelte:window! Но это конечно н...

Вы уверены, что не решает?

0

09.12.2020

Mark Tanashchuk 🇺🇦

Тогда нужно переформулировать вопрос. Не в Svelte, а "при использовании N"

0

09.12.2020

Eugene Ilyin Автор вопроса

Mark Tanashchuk 🇺🇦
Тогда нужно переформулировать вопрос. Не в Svelte,...

:) Ну до этого чата, я не знал что порекомендованный препроцессор немного херит такую возможность как корневая if директива

0

09.12.2020

Eugene Ilyin Автор вопроса

Valexr
svelte:window on:scroll bind:scrollY ?

А под svelte:window on:scroll bind:scrollY имеется ввиду вот так: https://svelte.dev/repl/33730646df8546d9a91e1f669c899b97?version=3.31.0 Это прямо вот совсем свелтовее некуда или еще есть где что улучшить по канону?

0

09.12.2020

Valexr

Eugene Ilyin
А под svelte:window on:scroll bind:scrollY имеется...

Ну в bind:scrollY={scrollY} можно координаты писать и на их разницу тригерить, что надо. А на on:scroll={func} запускать нужную функцию. Ток тут масло масленное вроде... нет возможности вникнуть и написать ваш кейс, но что покрутить написал выше.

0

09.12.2020

Eugene Ilyin Автор вопроса

Valexr
Ну в bind:scrollY={scrollY} можно координаты писат...

Ну кейс примитивный менять visible = scrollY === 0 || scrollYdelta < 0 Просто из-за того что нужна дельта при скроллинге появляется эти onMount, мне кажется проще не сделать

0

09.12.2020

Valexr

Eugene Ilyin
Ну кейс примитивный менять visible = scrollY === 0...

onMount выполняется 1 раз при маунте компонента

0

09.12.2020

Eugene Ilyin Автор вопроса

Valexr
onMount выполняется 1 раз при маунте компонента

Ну да, при восстановлении скроллинга в начале надо сохранить текущий window.scrollY, чтобы корректно считать дельты

0

09.12.2020