在svelte:Body内部的orientationchangeend上触发js函数

Trigger a js function on orientationchangeend inside svelte:body(在svelte:Body内部的orientationchangeend上触发js函数)

本文介绍了在svelte:Body内部的orientationchangeend上触发js函数的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

每当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 + ')'
    )
  ) }}
/>

我要更改divdisplay属性

  • 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
(编译器看不到类LandscapePortrait的任何元素,因此必须添加: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函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:在svelte:Body内部的orientationchangeend上触发js函数

基础教程推荐