在svelte：Body内部的orientationchangeend上触发js函数 [英] Trigger a js function on orientationchangeend inside svelte:body

问题描述

每当Svelte中的视区方向为纵向模式时，我都要显示黑色背景的消息。

我使用svelte-viewport-info获取了视区的方向。

<script lang="ts">
  import Viewport from 'svelte-viewport-info'
  console.log('standard Screen Orientation: ',Viewport.Orientation)
</script>

<svelte:body
  on:orientationchangeend={() => { console.log(
    'Screen Orientation changed to: ', Viewport.Orientation + (
      Viewport.detailledOrientation == null
      ? ''
      : '(' + Viewport.detailledOrientation + ')'
    )
  ) }}
/>

我要更改div的display属性

• 在landscape mode中，display设置为none
• 在portrait mode中，display设置为block

我找到js语法to call function after a certain amount of time interval

var test = 0;
var interval;

function check_test() {
    if( test == 1 ){
        clearInterval( interval );
        console.log( "Test is 1 now!" );
    }
}

interval = window.setInterval( check_test, 1000 );

在上述函数中，每1000毫秒/1秒调用一次。

我在#template-syntax-if中找到了在svelte中使用if语句的语法

我如何在Svelte中执行所有这些操作？这让人困惑

1. 在一定时间间隔后，我必须使用window.setInterval重复调用函数
2. 函数需要从On：OrientationChangeEnd Inside svelte：Body开始检查视区方向
3. 使用if in svelte将div的Display属性设置为Block或None，具体取决于第2步中的视区方向

推荐答案

来自svelte-viewport-infodocs

css类 此外，该包还根据当前设备方向添加或删除以下css类：
纵向-表示设备当前处于任意纵向方向
横向-表示设备当前处于任何横向

方向

因此，您甚至不必跟踪任何事件，只需使用这些类更改div>；>；REPL
(编译器看不到类Landscape和Portrait的任何元素，因此必须添加:global() modifier以便编译它们)

<script context="module">
    import Viewport from 'svelte-viewport-info'
</script>

<div class="only-portrait">
    only visible in Portrait Mode
</div>

<style>
    :global(.Landscape .only-portrait) {
        display: none;
    }
    :global(.Portrait .only-portrait) {
        display: block;
        background: black;
        color: white;
        padding: 2rem;
    }
</style>

这篇关于在svelte：Body内部的orientationchangeend上触发js函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！