Quick App에서 카운트다운 요소 구현

카운트다운 요소란?

카운트다운 요소는 프로모션 활동의 남은 시간을 표시하는 데 사용되며 해당 시간이 끝나면 알림을 보냅니다. 이 요소는 다음을 지원합니다.

일, 시, 분, 초로 시간 설정

텍스트, 테두리 및 구분자 스타일 구성

시간 지연

카운트다운 종료에 대한 콜백 이벤트

다음 그림과 같이 요소의 레이아웃은 숫자와 구분 기호로 구성됩니다. 일반적으로 숫자는 일, 시, 분, 초로 남은 시간을 나타냅니다. 구분 기호는 숫자를 구분하는 데 사용됩니다. 일반적인 구분 기호는 단어(일, 시, 분, 초)와 콜론(:)이 될 수 있습니다.

<import name="countdown" src="../Countdown/countdown"></import>
<template>
  <div class="container">
    <text>General usage</text>
    <div class="example-body">
      <countdown class="countdown" day="{{this.day}}" hour="{{this.hour}}" minute="{{this.minute}}" second="{{this.second}}" splitor-color="#007AFF" border-width="{{3}}" border-style="dotted" border-color="#007AFF"></countdown>
    </div>
  </div>
</template>

구현 단계

하위 요소 사용자 지정

카운트다운 UI는 보편적으로 사용할 수 있지만 콘텐츠의 레이아웃은 다양할 수 있으므로 하드코딩할 수 없습니다. 그렇지 않으면 콘텐츠 UI의 일부가 변경되면 하위 요소도 수정해야 하므로 오픈 소스 프로그래밍 원칙에 위배됩니다.

따라서 하위 요소의 스타일을 사용자 정의할 수 있도록 countdown.ux에서 여러 스타일 속성이 지원됩니다.

하위 요소의 속성 및 지원되는 이벤트 설계

전체 레이아웃 설계

텍스트 요소는 아래 그림 1과 같이 구분 기호 및 숫자의 레이아웃을 디자인하는 데 사용됩니다.

하위 요소의 소품에서 관련 속성을 정의하고 상위 요소가 하위 요소를 참조할 때 값을 전달합니다. 아래 그림 2와 같이 this.$watch('day', 'changeFlag')를 호출하여 값의 변경 사항을 수신한 다음 하위 요소의 값을 업데이트 및 처리합니다.

카운트다운 알고리즘을 구현합니다. 일, 시, 분을 초로 변환하고, 타이머를 매초 1씩 감소하도록 설정하고, 그에 따라 초를 다시 일, 시, 분, 초로 다시 변환해야 합니다(아래 그림 3 및 4 참조).

그림 1


그림 2a


그림 2b


그림 3


그림 4

상위 요소에서 timeup 콜백 이벤트를 정의하고 그림 5와 같이 이벤트를 구현 및 바인딩합니다.

그림 6에 표시된 대로 하위 요소에서 상위 요소의 timeup 이벤트를 트리거합니다.

그림 5a


그림 5b


그림 6

요약

이 자습서에서는 다음 방법을 배웠습니다.

속성 및 지원되는 이벤트를 포함하여 하위 요소를 디자인합니다.

상위 요소와 하위 요소 간의 데이터 통신을 구현합니다.

일, 시, 분, 초를 변환하고 타이머를 설정합니다.

요소의 스타일을 구성합니다.

참조

Quick app official document