MUIの使用上の注意点
DOM構造
muiページのdomについては、次のルールを知る必要があります.
固定バー前面
固定欄とは、ある.mui-barプロパティのノードは、fixedベースの要素です.一般的なコンポーネントには、上部ナビゲーションバー(.mui-bar-nav)、下部ツールバー(.mui-bar-footer)、下部タブ(.mui-bar-tab)、これらの要素は、次のルールに従う必要があります.mui-content要素の前に、下部ツールバーと下部タブでも配置します.mui-contentの前に、固定バーが主な内容の一部を隠す.
すべての内容はmui-contentに包まれます
固定欄を除いて、その他の内容はすべて包まなければならない.mui-contentでは、固定バーにマスクされる可能性があります.なぜなら、固定バーはFixedに基づいて位置決めされ、フローレイアウトの制限を受けず、通常の内容はtop:0の位置からレイアウトされ、固定バーにマスクされるため、muiはこの問題を解決するために、以下のcssコードを定義しています.
もちろんCSSをカスタマイズすることでこのような効果を実現することはできますが、使いやすいように固定欄以外のすべての内容をすべて置くことをお勧めします.mui-contentで.
常にbuttonボタンにtypeプロパティを追加
buttonボタンにtype属性がない場合、ブラウザはデフォルトでtype=submit論理処理に従い、typeのないbuttonをformフォームに置くと、ボタンをクリックするとformフォームのコミットが実行され、ページがリフレッシュされ、ユーザー体験が極めて悪い.
ウィンドウ管理
ページ初期化:muiを実行する必要があります.Initメソッド
muiは、ページの初期化時に、キーリスニング、ジェスチャーリスニングなど、多くのパラメータ構成を初期化するため、muiページは1回muiを呼び出す必要がある.Init()メソッド;
ページジャンプ:hrefジャンプを破棄する
ブラウザが新しいページをロードすると、ページDOMがまだレンダリングされていない場合、ページは先に空白を表示し、DOMがレンダリングされた後、具体的な内容を表示します.これはWEBブラウザ技術が越えられない体験障害です.この問題を解決するためにmuiを使用することをお勧めします.OpenWindowメソッドは新しいwebviewを開き、muiは新しいページのloadedイベントを自動的に傍受し、ロードが完了したら自動的に新しいページを表示します.拡張読書:
hello muiにおける待機なしフォーム切替がどのように実現されるかヒントHTML 5のパフォーマンスエクスペリエンスシリーズの1つです.
ページを閉じる:backbuttonを再傍受しない
muiフレームワークは、ページクローズロジックを自動的にカプセル化するものであり、カスタムリターンロジック(例えば、ページの戻りを編集するには、ユーザが下書きを放棄することを確認してからリターンロジックを実行する必要がある)を作成するにはmuiを書き換える必要がある.backメソッドでは、addEventListenerでbackbuttonリスニングを追加するのは簡単ではありません.addEventListenerは新しい実行プログラムを追加するだけで、muiのデフォルトパッケージのリスニング実行ロジックは引き続き実行されるので、addEventListenerにユーザー確認ボックスを追加するだけで、ユーザーはキャンセルを選択してもウィンドウを閉じ続けます.
ジェスチャー操作
クリック:clickを忘れます
迅速な応答はmobile Appの実現の重要な中の一つであり、研究によると、遅延が100ミリ秒を超えると、ユーザーはインタフェースのカートンを感じることができるが、携帯電話ブラウザのclickクリックには300ミリ秒の遅延がある(なぜ遅延するのか、300ミリ秒の脈絡があるのか、自分で谷百してください)、muiはこの問題を解決するためにtapイベントをカプセル化しているため、どのクリックでも、clickおよびonclickの操作を忘れてください.すべて次のコードを使用します.
よくあるエラー
Uncaught ReferenceError: plus is not defined
app開発では、HTML 5+拡張apiを使用するには、plusreadyイベントが発生してから正常に使用する必要があります.そうしないと、「plus is not defined」というエラーが発生する可能性があります.muiは開発を簡略化するためにplusReadyイベントをmuiにカプセル化した.plusReady()メソッドは、HTML 5+に関するapiはmuiに書くことをお勧めします.plusReadyメソッド;リンク:http://ask.dcloud.net.cn/article/122
muiページのdomについては、次のルールを知る必要があります.
固定バー前面
固定欄とは、ある.mui-barプロパティのノードは、fixedベースの要素です.一般的なコンポーネントには、上部ナビゲーションバー(.mui-bar-nav)、下部ツールバー(.mui-bar-footer)、下部タブ(.mui-bar-tab)、これらの要素は、次のルールに従う必要があります.mui-content要素の前に、下部ツールバーと下部タブでも配置します.mui-contentの前に、固定バーが主な内容の一部を隠す.
すべての内容はmui-contentに包まれます
固定欄を除いて、その他の内容はすべて包まなければならない.mui-contentでは、固定バーにマスクされる可能性があります.なぜなら、固定バーはFixedに基づいて位置決めされ、フローレイアウトの制限を受けず、通常の内容はtop:0の位置からレイアウトされ、固定バーにマスクされるため、muiはこの問題を解決するために、以下のcssコードを定義しています.
.mui-bar-nav ~ .mui-content {
padding-top: 44px;
}
.mui-bar-footer ~ .mui-content {
padding-bottom: 44px;
}
.mui-bar-tab ~ .mui-content {
padding-bottom: 50px;
}もちろんCSSをカスタマイズすることでこのような効果を実現することはできますが、使いやすいように固定欄以外のすべての内容をすべて置くことをお勧めします.mui-contentで.
常にbuttonボタンにtypeプロパティを追加
buttonボタンにtype属性がない場合、ブラウザはデフォルトでtype=submit論理処理に従い、typeのないbuttonをformフォームに置くと、ボタンをクリックするとformフォームのコミットが実行され、ページがリフレッシュされ、ユーザー体験が極めて悪い.
ウィンドウ管理
ページ初期化:muiを実行する必要があります.Initメソッド
muiは、ページの初期化時に、キーリスニング、ジェスチャーリスニングなど、多くのパラメータ構成を初期化するため、muiページは1回muiを呼び出す必要がある.Init()メソッド;
ページジャンプ:hrefジャンプを破棄する
ブラウザが新しいページをロードすると、ページDOMがまだレンダリングされていない場合、ページは先に空白を表示し、DOMがレンダリングされた後、具体的な内容を表示します.これはWEBブラウザ技術が越えられない体験障害です.この問題を解決するためにmuiを使用することをお勧めします.OpenWindowメソッドは新しいwebviewを開き、muiは新しいページのloadedイベントを自動的に傍受し、ロードが完了したら自動的に新しいページを表示します.拡張読書:
hello muiにおける待機なしフォーム切替がどのように実現されるかヒントHTML 5のパフォーマンスエクスペリエンスシリーズの1つです.
ページを閉じる:backbuttonを再傍受しない
muiフレームワークは、ページクローズロジックを自動的にカプセル化するものであり、カスタムリターンロジック(例えば、ページの戻りを編集するには、ユーザが下書きを放棄することを確認してからリターンロジックを実行する必要がある)を作成するにはmuiを書き換える必要がある.backメソッドでは、addEventListenerでbackbuttonリスニングを追加するのは簡単ではありません.addEventListenerは新しい実行プログラムを追加するだけで、muiのデフォルトパッケージのリスニング実行ロジックは引き続き実行されるので、addEventListenerにユーザー確認ボックスを追加するだけで、ユーザーはキャンセルを選択してもウィンドウを閉じ続けます.
ジェスチャー操作
クリック:clickを忘れます
迅速な応答はmobile Appの実現の重要な中の一つであり、研究によると、遅延が100ミリ秒を超えると、ユーザーはインタフェースのカートンを感じることができるが、携帯電話ブラウザのclickクリックには300ミリ秒の遅延がある(なぜ遅延するのか、300ミリ秒の脈絡があるのか、自分で谷百してください)、muiはこの問題を解決するためにtapイベントをカプセル化しているため、どのクリックでも、clickおよびonclickの操作を忘れてください.すべて次のコードを使用します.
element.addEventListener('tap',function(){
//
});よくあるエラー
Uncaught ReferenceError: plus is not defined
app開発では、HTML 5+拡張apiを使用するには、plusreadyイベントが発生してから正常に使用する必要があります.そうしないと、「plus is not defined」というエラーが発生する可能性があります.muiは開発を簡略化するためにplusReadyイベントをmuiにカプセル化した.plusReady()メソッドは、HTML 5+に関するapiはmuiに書くことをお勧めします.plusReadyメソッド;リンク:http://ask.dcloud.net.cn/article/122