觸發 js function onorientationchangeend inside svelte:body

Question

每當視口方向是苗條的縱向模式時，我想顯示一條黑色背景的消息。

我使用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語法在一定的時間間隔后調用function

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 );

所以在上面的 function 里面，每 1000 毫秒/1 秒調用一次。

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

我如何在苗條中執行所有這一切，這很令人困惑

1. 我必須在一定間隔后使用window.setInterval反復調用 function
2. Function 需要檢查視口方向on:orientationchangeend inside svelte:body
3. 根據步驟 2 中的視口方向，使用if in svelte將 div 的顯示屬性設置為阻塞或無

Answer 1

來自 svelte-viewport-info 文檔

CSS 類此外，package 還根據當前設備方向添加或刪除以下 CSS 類：
縱向- 表示設備當前處於任何“縱向”方向
橫向- 表示設備當前處於任何“橫向”方向

因此，您甚至不必跟蹤任何事件，您可以簡單地使用這些類來更改 div REPL的顯示（編譯器看不到任何具有Landscape和Portrait類的元素，因此:global()修飾符必須添加以便編譯）

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

<div>
    only visible in Portrait Mode
</div>

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