在 svelte:body 内的 orientationchangeend 上触发一个 js 函数

Question

我想在 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 语法

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 millisecond/1 秒调用一次。

我在 #template-syntax-if

中找到了在 svelte 中使用 if 语句的语法

我如何以苗条的方式执行所有这些操作，这令人困惑

我必须在一定时间间隔后使用 window.setInterval 重复调用函数
函数需要从 on:orientationchangeend inside svelte:body
使用 if in svelte 来 将 div 的显示属性设置为阻塞或 none 取决于在第 2 步的视口方向上

Answer 1

来自svelte-viewport-infodocs

CSS Classes In addition, the package also adds or removes the following CSS classes depending on the current device orientation:
Portrait - indicates that the device is currently in any "Portrait" orientation
Landscape - indicates that the device is currently in any "Landscape" orientation

因此您甚至不必跟踪任何事件，您可以简单地使用这些类来更改 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 函数

Trigger a js function on orientationchangeend inside svelte:body

javascript

viewport

svelte