Einführung in die neue von WeChat entwickelte Drag-Komponente – bewegliche Ansicht

Am Vorabend des 520-Feiertags machte das Miniprogramm die Programmierer erneut unruhig. Es aktualisierte einige attraktive Funktionen wie die Inhaltsweiterleitungs-API, die iBeacon-API, die Vibrations-API, die API zur Anpassung der Bildschirmhelligkeit usw. Außerdem wurde die Karte verbessert Funktion der Komponente.

In diesem Update wird auch eine neue UI-Komponente hinzugefügt, nämlich die Ansichtskomponente „movable-view“, die zusammen mit „movable-area“ verwendet werden muss. Einfach ausgedrückt handelt es sich um einen Container, der das Ziehen von Inhalten innerhalb eines bestimmten Bereichs unterstützt. Schauen wir uns ein einfaches Beispiel an:

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

Schnittstelle

Wir verwenden „movable-area“, um einen beweglichen Bereich der Größe 200x200 festzulegen. Ziehen Sie den Bereich (rot) und platzieren Sie dann eine ziehbare 50x50-Ansicht (blau) in diesem Bereich. Die Richtung dieses ziehbaren Inhalts ist auf „Alle“ eingestellt, was bedeutet, dass er in jede Richtung gezogen werden kann.

Drag-Demonstration

In einem Tag mit beweglichem Bereich können Sie tatsächlich mehr als eine bewegliche Ansicht platzieren. Es unterstützt das Platzieren mehrerer beweglicher Elemente – Sehen Sie sich das folgende Beispiel an:

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

Schnittstelle 2

Drag Demo 2

Das Richtungsattribut der beweglichen Ansicht unterstützt die folgenden vier Werte:

• all – In jede Richtung ziehen

• vertikal – vertikal ziehen

• horizontal – horizontal ziehen

• keine – Ziehen nicht möglich

The Die ersten 3 Werte sind leicht zu verstehen. Wenn die Richtung auf die letzte Keine eingestellt ist, können Sie sie nur im beweglichen Bereich positionieren, indem Sie die x- und y-Attributwerte festlegen:

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

Sobald dieser Code ausgeführt wird, wird der blaue bewegliche Bereich angezeigt. Die Ansicht wird an der Position (50,50) angezeigt:

image.png

Okay, Ziehen des Miniprogramms Dies ist Eine kurze Einführung in die Funktionen der Komponente. Ich hoffe, sie ist hilfreich für Sie.

[Verwandte Empfehlungen]

1. Quellcode der WeChat-Plattform herunterladen

2. Betriebsversion des PigCms-Mikro-E-Commerce-Systems (unabhängiges WeChat-Einkaufszentrum + dreistufiges Vertriebssystem)

3.

WeChat People Network v3.4.5 Advanced Business Edition WeChat Rubik's Cube Quellcode

Das obige ist der detaillierte Inhalt vonEinführung in die neue von WeChat entwickelte Drag-Komponente – bewegliche Ansicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!