모바일웹에서 이 기능 구현하려면 어떻게 하나요?

Question

네이버 지도에 있는 컴포넌트입니다. 손으로 드래그하면 하단 특정 위치까지 내려가고 올라가는 기능을 모바일웹에서 구현하려면 어떻게 해야할까요?css animation 으로 효과를 주면 되는걸까요?

yeori · Accepted Answer

PlaceDetailView 정도의 이름으로 컴포넌트를 빼내고position: flxed; z-index: 100000; 정도로 먹여서 레이어 최상단에 오게 위치시킨 후끌어올렸을때는top: 25%; // 상단에서 4분의 1지점부터..끌어내렸을때는bottom: 0;기타 잡다한 css는 생략하고, 접히고 펼칠때의 효과는 css transform 으로 구현하면 스르륵~ 펼쳐젔다 접혔다 구현됩니다.컴포넌트는 두어개 정도로 나눠서 구현한 후 PlaceDetailView - PlaceNavBar - PlaceBodyPlaceNavBar안에 swipe 관련 기능을 javascript로 구현하면 될듯합니다. PlaceDetailView는 두가지 상태를 구현하겠죠.- 접혔을때- 펼쳤을때자식 컴포넌트인 PlaceNavBar가 부모 컴포넌트인 PlaceDetailView에게 접히고 펼치는 이벤트를 던져주고, 부모 컴포넌트가 상태를 변경하면 알아서 자식 컴포넌트를 가리든 바꿔끼든 변경하는 식...swipe 기능은 라이브러리를 쓰거나 직접 구현할 수 있는데 직접 구현해도 아주 어렵지는 않습니다.PlaceNavBar가 touchstart, touchmove, touchend를 listen 해서 커스텀이벤트를 조립해서 부모 컴포넌트에게 던져주는 식...

윤디 · Answer

요소 위로 올라오니 position 이겠네요

모바일웹에서 이 기능 구현하려면 어떻게 하나요?

2개의 답변

Q&A 목록