WeChat에서 개발한 새로운 드래그 구성 요소 소개

WeChat에서 개발한 새로운 드래그 구성 요소 소개 - movableview

零下一度

풀어 주다： 2017-05-23 15:00:26

원래의

2044명이 탐색했습니다.

520 휴일을 앞두고 미니 프로그램은 프로그래머들을 다시 불안하게 만들었습니다. 콘텐츠 전달 API, iBeacon API, 진동 API, 화면 밝기 조정 API 등 몇 가지 매력적인 기능이 업데이트되었습니다. 또한 지도도 향상되었습니다. 구성 요소의 기능.

이번 업데이트에는 새로운 UI 컴포넌트도 추가되었는데, 이는 이동 가능한 영역과 함께 사용해야 하는 뷰 컴포넌트 movable-view입니다. 간단히 말해서 지정된 영역 내에서 콘텐츠 드래그를 지원하는 컨테이너입니다. 간단한 예를 살펴보겠습니다.

<movable-area style="height: 200px;width: 200px;background: red;">
  <movable-view direction="all" style="height: 50px; width: 50px; background: blue;">
  </movable-view>
</movable-area>

로그인 후 복사

WeChat에서 개발한 새로운 드래그 구성 요소 소개 - movableview

Interface

movable-area를 사용하여 드래그 가능한 영역을 200x200 영역으로 설정합니다. (빨간색) 그런 다음 이 영역에 50x50 드래그 가능한 콘텐츠 이동 가능 뷰(파란색)를 배치합니다. 이 드래그 가능한 콘텐츠의 방향은 모두로 설정됩니다. 즉, 어떤 방향으로든 드래그할 수 있습니다.

WeChat에서 개발한 새로운 드래그 구성 요소 소개 - movableview

드래그 데모

이동 가능 영역 태그에서는 실제로 두 개 이상의 이동 가능 뷰를 배치할 수 있으며 여러 이동 가능 뷰 배치를 지원합니다. 다음 예를 살펴보세요.

<movable-area style="height: 200px;width: 200px;background: red;">

  <!--蓝色任意方向拖动的内容-->
  <movable-view direction="all" style="height: 50px; width: 50px; background: blue;">
  </movable-view>

  <!--黄色只能横向拖动的内容-->
  <movable-view direction="horizontal" style="height: 20px; width: 50px; background: yellow;">
  </movable-view>

</movable-area>

로그인 후 복사

WeChat에서 개발한 새로운 드래그 구성 요소 소개 - movableview

Interface 2

WeChat에서 개발한 새로운 드래그 구성 요소 소개 - movableview

Drag Demo 2

movable-view의 방향 속성은 다음 네 가지 값을 지원합니다:

all - 어떤 방향으로든 드래그
vertical - 수직으로 드래그
수평 - 수평으로 드래그
없음 - 드래그 불가

앞 3개 값 이해하기 쉽습니다. 방향이 마지막 없음으로 설정된 경우 x 및 y 속성 값을 설정해야만 이동 가능한 영역에 위치를 지정할 수 있습니다.

<movable-area style="height: 200px;width: 200px;background: red;">
  <movable-view direction="none" x="50" y="50" style="height: 50px; width: 50px; background: blue;">
  </movable-view>
</movable-area>

로그인 후 복사

이 코드가 실행되자마자 파란색 이동 가능 보기가 (50,50) 위치에 표시됩니다:

WeChat에서 개발한 새로운 드래그 구성 요소 소개 - movableview