ピッカーコンポーネントとはPC 側の選択タグと比較すると、モバイル側の選択ボックスは通常、viewPort の下部にポップアップ表示されます。 ピッカーコンポーネントの問題
解決宣言型プログラミングを使用してピッカーをボディに配置すると、上記の2つの問題をより適切に回避できます。たとえば、次のメソッドを使用してピッカーの表示と非表示を呼び出すことができます。 this.$picker(コンポーネントオプション、{ ラッパー: { プロパティ: {}, の上: {} }, プロパティ: {}, の上: {} }) オプションの説明
解決ディレクトリ部門- コンポーネント Pickerコンテナの説明Picker.vue ファイル関数:
コードは次のとおりです。 <トランジション名="スライドアップ"> <div class="picker" v-if="表示"> <スロット></スロット> <div class="mask"></div> </div> </トランジション> ピッカーの作成アイデアの概要
ピッカー機能
作成する
アニメーション時間をマウント時に直接取得するのではなく、requestAnimationFrame で取得する必要があるのはなぜですか? コンポーネントのマウントされた関数は、最初のレンダリング後に呼び出され、Toast コンポーネントは showStatus を設定することで遷移の enter 関数をトリガーします (Toast コンポーネントのマウントされた関数は事前に呼び出されますが、この時点ではトースト dom 上に遷移クラスはありません)。このとき、data.setter 関数がトリガーされ、Watcher を分散して更新し、すべての操作が nextTick (つまり microtask) で実行されるため、呼び出し順序は次のようになります。 Toast コンポーネントがマウントされました -> 親コンポーネントがマウントされました (つまり、現在実行中の Mounted 関数です。toast の transition には appear 属性がないため、transition enter 関数はトリガーされず、transition クラスは追加されないことに注意してください) -> nextTick() -> Toast コンポーネントが update(v-show) -> transition(v-show が enter 関数をトリガーします) -> toast dom が transition クラス名を追加します -> window.getComputedStyle(toast) で toastDuration を取得します。これは nextTick でも取得できます。transition active はアニメーション プロセス全体にわたって存在し、requestAnimationFrame はブラウザーの再描画 (ペインター) フック関数に属しているため、microtask よりも後で実行され、ここで取得します。 見せる
隠れる
削除にsetTimeoutを使用する理由 監視遷移の使用に問題があります: Vue自体は、トランジションコンポーネントの子ノードのtransitionend(またはanimationend)をリッスンします。 取り除く削除関数は実際のDOMを削除し、遅延器をクリアし、タイマーとピッカーインスタンスをnullに設定し、GCを呼び出します。 子コンポーネントの更新Picker コンポーネントが完了した後、コンポーネント内の props が更新されていないことがわかったので、ここで手動でコンポーネントの更新をトリガーする関数を記述します。コンポーネント vnode には 4 つのフック関数があります。更新時に prepatch が呼び出されます。値は 2 つあります。1 つ目は最後の vnode で、2 つ目は変更された vnode です。したがって、元の vnode と Component を PickerCommand 関数で diff の古い vnode として prepatch します。この関数を呼び出すと、コンポーネントを更新できます。 結論Picker コンポーネントは単なる例であり、これを実装するためにさらに多くのメソッドを使用できます。モバイル端末での Vue2.x Picker のグローバルコール実装に関するこの記事はこれで終わりです。Vue2.x Picker のグローバルコールに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Centos7.3 で mysql5.7.18 をインストールして初期パスワードを変更する方法
>>: ファイル書き込みを使用して Linux アプリケーションをデバッグする方法
序文スロークエリとは何か、またスロークエリを最適化するにはどうすればよいか。以下では、これら 2 つ...
境界範囲間のmysql間の範囲は両側の境界値を含む例: 3 から 7 までの id は、id >...
ウェブサイト機能を開発する場合、セッション キャッシュを時間内にクリアできません。一連の探索が始まり...
1.画像をダウンロードするdocker pull selenium/hub docker pull ...
オーディオおよびビデオ ファイルを保存するためのディスク寿命を延ばすには、ディスクをフォーマットする...
この記事では、フロントエンドページのスライド検証を実装するためのJavaScript + HTMLの...
LinuxにRedisをインストールしたら、Javaを使って接続します。Javaコードは次のとおりで...
最近、弁護士推薦のウェブサイトを作成していたのですが、検索ボックスに問題がありました。検索ボックス内...
サイト上のページを表示するためのリクエストがサーバーに送信されると(たとえば、ユーザーがブラウザでペ...
目次序文脱構築記号の役割使い方分割割り当ての適用アプリケーションの簡単な紹介JSONデータを抽出する...
この記事では、MySQL 8.0.20 winx64 のインストールと設定方法を次のように説明します...
フロントエンド プロジェクトとバックエンド プロジェクトは分離されており、フロントエンドとバックエン...
目次序文🍹準備🍲vue3 の使い方🍖 実装要約する序文最近、私の最初の公式 vue3 + ts プロ...
目次概要4つの例例1: 誕生日で説明する約束の基本例2: 数字当てゲーム例3: Web APIから国...
序文誰もが日常業務で SQL の最適化を経験したことがあると思います。したがって、最適化の前に、遅い...