WeChat アプレットでの新しいドラッグ コンポーネントの可動ビューの使用方法の概要

不言
リリース: 2018-06-26 16:02:33
オリジナル
5362 人が閲覧しました

この記事では主に、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>
ログイン後にコピー

インターフェース

可動領域を使用して、サイズ200x200のドラッグ可能な領域(赤)を設定し、次にAを50倍に設定します50ドラッグ可能なコンテンツの可動ビュー (青) がこの領域に配置されます。このドラッグ可能なコンテンツの方向は all に設定されており、任意の方向にドラッグできます。


ドラッグデモ

可動領域タグでは、複数の可動ビューの配置をサポートしています。次の例を参照してください。インターフェース 2

ドラッグデモ 2

movable-view の方向属性は、次の 4 つの値をサポートします:

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


垂直にドラッグ

  • - 水平方向にドラッグします

  • none - ドラッグできません

  • 最初の 3 つの値は理解しやすいです。方向が最後の none に設定されている場合、x および y 属性値を設定することによってのみ可動領域に配置できます:

  • <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>
    ログイン後にコピー


    このコードが実行されるとすぐに、青い可動ビューは(50,50) の位置に表示されます:

    以上がこの記事の全内容です。その他の関連コンテンツについては、PHP に注目してください。中国語のサイトです!

    関連する推奨事項:

    WeChat アプレットは、API インターフェースを介してアプレットに json データを表示します

    WeChat アプレットの都市位置の実装

    WeChat アプレット ボタン コンポーネントの使用方法の紹介


    以上がWeChat アプレットでの新しいドラッグ コンポーネントの可動ビューの使用方法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!