Svelte에서 재사용 가능한 레이아웃 구성 요소를 만드는 방법

몇 줄 안에 페이지 전체에서 실제로 사용할 구성 요소를 만들 수 있습니다.

이 튜토리얼에서는 프로젝트 페이지의 구조 역할을하는 Svelte 컴포넌트를 구현합니다.

페이지 레이아웃이 비슷하고 콘텐츠 스크롤에 반응하고 싶을 때 유용합니다.

여기서 구축 할 구조는 다음과 같이 구성됩니다.

  • 주요 내용 : 스크롤 가능
  • 헤더 : 페이지 상단에 고정
  • 바닥 글 : 페이지 하단에 고정

머리글 및 바닥 글 추가

메인 콘텐츠 레이아웃을 추가하기 시작합니다. 이것은 "메인"요소와 슬롯으로 구성됩니다.

<main bind:this={main} class:header class:footer>
  <slot/>
</main>

<div class="slotHeader">
  <slot name="header"/>
</div>
<div class="slotFooter">
  <slot name="footer"/>
</div>
  • "main"요소에 바인딩 될 "main"변수
  • 존재 여부를 나타내는 필수 속성 "header"및 "footer"
  • 높이, 기본값은 64

<script>
  let main;
export let header = false;
  export let headerHeight = 64;
export let footer = false;
  export let footerHeight = 64;
</script>

$: if(main) {
  main.style.setProperty('--header-height', headerHeight + 'px');
  main.style.setProperty('--footer-height', footerHeight + 'px');
}

<style>
  main {
    height: 100%;
    overflow-y: auto;
  }
main.header {
    padding-top: var(--header-height, 0px);
  }
main.footer {
    padding-bottom: var(--footer-height, 0px);
  }
.slotHeader {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
  }
.slotFooter {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
  }
</style>

<main bind:this={main} class:header class:footer>
  <slot/>
</main>
<div class="slotHeader">
  <slot name="header"/>
</div>
<div class="slotFooter">
  <slot name="footer"/>
</div>
<script>
  let main;
  export let header = false;
  export let headerHeight = 64;
  export let footer = false;
  export let footerHeight = 64;
  $: if(main) {
    main.style.setProperty('--header-height', headerHeight + 'px');
    main.style.setProperty('--footer-height', footerHeight + 'px');
  }
</script>
<style>
  main {
    height: 100%;
    overflow-y: auto;
  }
main.header {
    padding-top: var(--header-height, 0px);
  }
main.footer {
    padding-bottom: var(--footer-height, 0px);
  }
.slotHeader {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
  }
.slotFooter {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
  }
</style>

이를 구현하려면 메인 콘텐츠 스크롤 이벤트를 수신하고 헤더가 숨길 지 여부와시기를 계산해야합니다. 바닥 글에도 동일하게 적용됩니다.

레이아웃에서 "기본"요소를 편집합니다.

<main bind:this={main} class:header class:footer on:scroll={Scroll}>

<div class="slotHeader" class:hide={hideHeader && scroller.hide}>
  <slot name="header"/>
</div>
<div class="slotFooter" class:hide={hideFooter && scroller.hide}>
  <slot name="footer"/>
</div>
  • 스크롤링 데이터
  • 임계 값, 그 후에 머리글과 바닥 글을 숨길
  • 머리글과 바닥 글을 스크롤 할 때 숨길 수 있는지 여부

let scroller = {
  scroll: 0,
  direction: true, // true: scroll down; false: scroll up
  delta: 0,
  hide: false,
  initialScroll: 0
};
export let threshold = 64;
export let hideHeader = false;
export let hideFooter = false;

const Scroll = e => {
  const scroll = e.target.scrollTop;
  
  scroller = {
    scroll,
    direction: scroll > scroller.scroll,
    delta: scroll - scroller.initialScroll,
    hide: scroll > threshold && scroller.hide
      ? scroll - scroller.initialScroll > -threshold
      : scroll - scroller.initialScroll > threshold,
    initialScroll: (scroll > scroller.scroll) != scroller.direction
      ? scroll
      : scroller.initialScroll
  };
};

.slotHeader {
  // previous code
  transition: all .2s ease-in-out;
}
.slotHeader.hide {
  transform: translateY(-100%);
}
.slotFooter {
  // previous code
  transition: all .2s ease-in-out;
}
.slotFooter.hide {
  transform: translateY(100%);
}

세 가지 방법으로 할 수 있습니다. 모두 구현하는 것이 좋습니다.

스크롤러 속성 내보내기

export let scroller = {...};

슬롯 소품

<main bind:this={main} class:header class:footer on:scroll={Scroll}>
  <slot {scroller}/>
</main>

이벤트 발송

import {createEventDispatcher} from "svelte";
const dispatch = createEventDispatcher();
const Scroll = e => {
  // previous code
  dispatch('scroller', scroller);
};

완전한 코드 및 사용 예

결론

질문이나 제안이 있으시면 언제든지 댓글을 남겨주세요.

모두 감사하고 더 많은 기사를 위해 저를 따르십시오!

내 다른 기사 중 일부는 다음과 같습니다.

JavaScript 프로젝트 에서 Svelte DIY Multilanguage로 라우터를 만드는 방법

Suggested posts

JavaScript의 이벤트 루프

호출 스택, 웹 API, 이벤트 대기열, 마이크로 작업, 매크로 작업

JavaScript의 이벤트 루프

이벤트 루프는 JavaScript의 비동기 프로그래밍의 비밀입니다. JS는 단일 스레드에서 모든 작업을 실행하지만 몇 가지 스마트 데이터 구조를 사용하면 멀티 스레딩의 환상을 얻을 수 있습니다.

Node 및 Express 앱을 처음부터 촬영하세요!

Node 및 Express 앱을 처음부터 촬영하세요!

정적 웹 페이지가 지루하고 항상 사용자가 상호 작용하도록 만들고 싶습니까? 당신은 저와 같은 자바 스크립트 팬이지만 백엔드 개발을 시작하는 방법을 모르십니까? 잠깐, 당신은 올바른 자리에 있습니다. Node and Express 앱을 처음부터 바로 촬영 해 봅시다! 장치에 노드와 npm이 설치되어 있는지 확인하십시오.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.