WeChatが開発した新しいドラッグコンポーネントの紹介 -可動ビュー

520 ホリデーの前夜、ミニ プログラムは、コンテンツ転送 API、iBeacon API、振動 API、画面輝度調整 API などのいくつかの魅力的な機能を更新し、マップ コンポーネントも強化しました。関数。

今回のアップデートでは、新しい UI コンポーネントも追加されました。これは、可動エリアと併用する必要があるビューコンポーネント可動ビューです。簡単に言えば、指定された領域内でのコンテンツのドラッグをサポートするコンテナーです。簡単な例を見てみましょう:

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

インターフェース 2。

ドラッグデモ2

movable-viewの方向プロパティは、次の4つの値をサポートしています:

• all - 任意の方向にドラッグ

• vertical - 垂直にドラッグ

• horizo​​ntal -水平方向のドラッグ

• なし - ドラッグできません

最初の 3 つの値は理解しやすいです。方向が最後の none に設定されている場合、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. WeChatパブリックアカウントプラットフォームのソースコードダウンロード

2. PigCmsマイクロ電子商取引システムオペレーティングバージョン（独立したマイクロストアモール+3レベルの流通システム）

3 WeChat 接続王 v3.4.5 Advanced Business Edition WeChat ルービック キューブ ソース コード

以上がWeChatが開発した新しいドラッグコンポーネントの紹介 -可動ビューの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。