본문으로 건너뛰기
Version: Next

Conveyer

class Conveyer extends Component

Conveyer는 네이티브 스크롤에 드래그 제스처를 추가합니다.

constructor

new Conveyer(scrollArea, options)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
scrollAreastring | HTMLElement | Ref<HTMLElement>모듈을 적용할 기준 엘리먼트
optionsConveyerOptions✔️{}eg.InfiniteGrid 모듈의 옵션 객체
<div class="items">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script>
import Conveyer from "@egjs/conveyer";

const conveyer = new Conveyer(".items");
</script>

Properties

isReachStart

readonly

스크롤이 시작에 닿았는지 여부.

Type: boolean

Default: true

import { Conveyer } from "@egjs/conveyer";

const conveyer = new Conveyer(".container");

conveyer.isReachStart

isReachEnd

readonly

스크롤이 끝에 닿았는지 여부.

Type: boolean

Default: false

import { Conveyer } from "@egjs/conveyer";

const conveyer = new Conveyer(".container");

conveyer.isReachEnd

scrollPos

readonly

컨테이너의 스크롤 위치

Type: number

Default: 0

import { Conveyer } from "@egjs/conveyer";

const conveyer = new Conveyer(".container");

conveyer.scrollPos

Methods

findElement

해당 방향에 대해 엘리먼트를 찾는다.]

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
direction"start" | "end" | "prev" | "next"엘리먼트의 방향. "start", "end"는 안쪽으로 찾는다. "prev", "next"는 바깥쪽으로 찾는다.
optionsFindItemOptions✔️{}findElement 메서드의 옵션

See:

findItem

엘리먼트 또는 해당 방향에 대해 아이템을 찾는다.

Returns: ConveyerItem | null

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
targetHTMLElement | "start" | "end" | "prev" | "next"엘리먼트의 방향. "start", "end"는 안쪽으로 찾는다. "prev", "next"는 바깥쪽으로 찾는다.
optionsFindItemOptions✔️{}findItem 메서드의 옵션

See:

scrollIntoView

엘리먼트나 해당 방향에 있는 아이템을 뷰안으로 스크롤을 한다.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
targetHTMLElement | "start" | "end" | "prev" | "next"엘리먼트의 방향. "start", "end"는 안쪽으로 찾는다. "prev", "next"는 바깥쪽으로 찾는다.
optionsScrollIntoViewOptions✔️{}scrollIntoView 메서드의 옵션

See:

scrollBy

주어진 위치 양만큼 스크롤한다.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
posnumber스크롤할 위치의 양.
duration✔️0해당 위치만큼 스크롤하는 시간

scrollTo

주어진 위치로 스크롤한다.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
posnumber스크롤할 위치의 양.
duration✔️0해당 위치로 스크롤하는 시간

setItems

Conveyer에 아이템들을 직접 설정한다.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsConveyerItem[]Conveyer에 설정할 아이템들

updateItems

아이템들의 포지션, 사이즈 정보를 업데이트 한다.

updateContainer

컨테이너의 크기, 스크롤 사이즈를 업데이트 한다.

update

컨테이너와 아이템들을 업데이트 한다.

init

autoInit 옵션을 false로 사용하는 경우 직접 init 메서드를 통해 초기화 할 수 있다.

destroy

인스턴스와 이벤트를 해제한다.

trigger

inherited

커스텀 이벤트를 발생시킨다

Returns: this

  • 컴포넌트 자신의 인스턴스
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventstring | ComponentEvent발생할 커스텀 이벤트의 이름 또는 ComponentEvent의 인스턴스
paramsArray<any> | $ts:...커스텀 이벤트가 발생할 때 전달할 데이터
import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
beforeHi: ComponentEvent<{ foo: number; bar: string }>;
hi: { foo: { a: number; b: boolean } };
someEvent: (foo: number, bar: string) => void;
someOtherEvent: void; // When there's no event argument
}> {
some(){
if(this.trigger("beforeHi")){ // When event call to stop return false.
this.trigger("hi");// fire hi event.
}
}
}

const some = new Some();
some.on("beforeHi", e => {
if(condition){
e.stop(); // When event call to stop, `hi` event not call.
}
// `currentTarget` is component instance.
console.log(some === e.currentTarget); // true

typeof e.foo; // number
typeof e.bar; // string
});
some.on("hi", e => {
typeof e.foo.b; // boolean
});
// If you want to more know event design. You can see article.
// https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F

once

inherited

이벤트가 한번만 실행된다.

Returns: this

  • 컴포넌트 자신의 인스턴스
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring | $ts:...등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트
handlerToAttachfunction | $ts:...✔️등록할 이벤트의 핸들러 함수
import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
hi: ComponentEvent;
}> {
hi() {
alert("hi");
}
thing() {
this.once("hi", this.hi);
}
}

var some = new Some();
some.thing();
some.trigger(new ComponentEvent("hi"));
// fire alert("hi");
some.trigger(new ComponentEvent("hi"));
// Nothing happens

hasOn

inherited

컴포넌트에 이벤트가 등록됐는지 확인한다.

Returns: boolean

  • 이벤트 등록 여부
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring등록 여부를 확인할 이벤트의 이름
import Component from "@egjs/component";

class Some extends Component<{
hi: void;
}> {
some() {
this.hasOn("hi");// check hi event.
}
}

on

inherited

컴포넌트에 이벤트를 등록한다.

Returns: this

  • 컴포넌트 자신의 인스턴스
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring | $ts:...등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트
handlerToAttachfunction | $ts:...✔️등록할 이벤트의 핸들러 함수
import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
hi: void;
}> {
hi() {
console.log("hi");
}
some() {
this.on("hi",this.hi); //attach event
}
}

off

inherited

컴포넌트에 등록된 이벤트를 해제한다.
eventName이 주어지지 않았을 경우 모든 이벤트 핸들러를 제거한다.
handlerToAttach가 주어지지 않았을 경우 eventName에 해당하는 모든 이벤트 핸들러를 제거한다.

Returns: this

  • 컴포넌트 자신의 인스턴스
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring | $ts:...✔️해제할 이벤트의 이름
handlerToDetachfunction | $ts:...✔️해제할 이벤트의 핸들러 함수
import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
hi: void;
}> {
hi() {
console.log("hi");
}
some() {
this.off("hi",this.hi); //detach event
}
}

Events

reachStart

스크롤이 앞에 닿으면 발생하는 이벤트이다.

leaveStart

스크롤이 앞에서 떠나면 발생하는 이벤트이다.

reachEnd

스크롤이 끝에 닿으면 발생하는 이벤트이다.

leaveEnd

스크롤이 끝에서 떠나면 발생하는 이벤트이다.

beginScroll

스크롤이 시작하면 발생하는 이벤트이다.

finishScroll

스크롤이 끝나면 발생하는 이벤트이다.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eOnFinishScroll이벤트에 전달되는 데이터 객체