Introduction au nouveau composant drag développé par WeChat - movingview

À la veille des vacances 520, le mini programme a de nouveau rendu les programmeurs agités. Il a mis à jour certaines fonctions attrayantes, telles que l'API de transfert de contenu, l'API iBeacon, l'API de vibration, l'API de réglage de la luminosité de l'écran, etc., et a également amélioré la carte. . La fonction du composant.

Dans cette mise à jour, un nouveau composant d'interface utilisateur est également ajouté, à savoir le composant de vue mobile-view, qui doit être utilisé avec la zone mobile. En termes simples, il s'agit d'un conteneur qui prend en charge le déplacement de contenu dans une zone spécifiée. Regardons un exemple simple :

<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

Nous utilisons une zone mobile pour définir une zone mobile de taille 200x200. Faites glisser la zone (rouge), puis placez une vue mobile de contenu déplaçable 50x50 (bleu) dans cette zone. La direction de ce contenu déplaçable est définie sur tous, ce qui signifie qu'il peut être déplacé dans n'importe quelle direction.

Démonstration de glisser

Dans une balise de zone mobile, vous pouvez en fait placer plus d'une vue mobile, elle prend en charge le placement de plusieurs éléments mobiles - vue, regardez l'exemple suivant :

<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

Faites glisser Démo 2

L'attribut direction de la vue mobile prend en charge les quatre valeurs suivantes :

• all - Faites glisser dans n'importe quelle direction

• vertical - Faites glisser verticalement

• horizontal - Faites glisser horizontalement

• aucun - Impossible de faire glisser

Le les 3 premières valeurs sont faciles à comprendre. Si la direction est définie sur aucun, vous ne pouvez la positionner que dans la zone mobile en définissant les valeurs des attributs x et 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>

Dès que ce code est exécuté, le bleu mobile- La vue est affichée à la position de (50,50) :

image.png

Bien, faites glisser le mini programme C'est une brève introduction aux fonctions des composants, j'espère que cela vous sera utile.

[Recommandations associées]

1. Téléchargement du code source de la plateforme de compte public WeChat

2 Version de fonctionnement du système de micro-commerce PigCms. (centre commercial WeChat indépendant + système de distribution à trois niveaux)

3 WeChat People Network v3.4.5 Advanced Business Edition Code source de WeChat Rubik's Cube

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!