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

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>

Interface

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

드래그 데모

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

<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>

Interface 2

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) 위치에 표시됩니다:

image.png

자, 미니 프로그램의 드래그 구성 요소는 이 것입니다. 기능에 대한 간략한 소개입니다. 도움이 되길 바랍니다.

[관련 추천]

1. 위챗 공개계정 플랫폼 소스코드 다운로드

PigCms 마이크로 전자상거래 시스템 운영 버전 (독립 WeChat 매장 몰 + 3단계 유통 시스템)

3. WeChat People Network v3.4.5 Advanced Business Edition WeChat Rubik's Cube 소스 코드

위 내용은 WeChat에서 개발한 새로운 드래그 구성 요소 소개 - movableview의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!