ピッカーコンポーネントとは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 アプリケーションをデバッグする方法
この記事はWindows 10のシステム環境をベースに、Reactの学習と使用について説明しています...
Linux ファイルシステム一般的なハードディスクは上図のとおりです。各ディスクは複数のトラックに分...
> MySQL 5.7 クラスタ マスターとスレーブをデプロイする (テストのみ)イメージバー...
Nginxの仕組みNginx はコアとモジュールで構成されています。 Nginx 自体は実際にはほと...
目次ここでの問題は次の通りです:解決策1:解決策2: コンストラクタで初期化を割り当てる採掘場の概要...
目次1. インストール前の準備、インストールパッケージのダウンロード1 インストールの準備2 インス...
SQL は、データを特定の順序で並べ替え、特定のフィールドでグループ化した後、隣接する 2 つのデ...
この記事は、参考のためにMySQL 8.0.12のインストールグラフィックチュートリアルを記録してい...
質問LINUX では、定期的なタスクは通常、cron デーモン プロセス [ps -ef | gre...
NULL が頻繁に使用されるのはなぜですか? (1)Javaのnull Java の NullPoi...
目次1. 定義と使用1.1 定義1.2 使用2. 複数のファイルに分割する3. エイリアス序文: T...
MySQLはOracleのようなシーケンスを実装しているOracle は通常、主キー フィールドを処...
この記事は主に、SQL のストアド プロシージャから返されたデータを取得するプロセスの分析を紹介しま...
実行環境、Idea2020バージョン、Tomcat10、実行時にTomcat CatalinaLog...
Nginx ログの説明アクセス ログを通じて、ユーザーの地理的起源、ジャンプ元、使用端末、特定の U...