1

Phonegap モバイル アプリ用に jquery モバイルと css を使用してカスタム ボタンを設計しました。ボタンをクリックすると、オン/オフ状態が切り替わり、css クラスが変更されます。ただし、iPhone/iPad/Android デバイスではトグル/変更が遅すぎます。トグルされた css のボタンのレンダリングには、多少の遅延があります。実際、デスクトップ ブラウザではかなり高速です。

私がコードで行っているのは次のとおりです。

$("input[id='someid']").closest('div').removeClass("buttonUp ").addClass("buttonDown");
$("input[id='someid']").closest('div').removeClass("buttonDown").addClass("buttonUp");

CSS:

            .buttonDown {
                border:1px solid #000;font-weight:bold; cursor:pointer; text-shadow:0 1px 1px #000; text-decoration:none; background:#8FFFDD;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#8FFFDD), color-stop(100%,#72ccb1));background-image:-moz-linear-gradient(top, #72ccb1 0%, #8FFFDD 100%);background-image:-webkit-linear-gradient(top, #8FFFDD 0%,#72ccb1 100%);background-image:-o-linear-gradient(top, #8FFFDD 0%,#72ccb1 100%);background-image:-ms-linear-gradient(top, #8FFFDD 0%,#72ccb1 100%);background-image:linear-gradient(to bottom, #8FFFDD 0%,#72ccb1 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#8FFFDD', endColorstr='#72ccb1',GradientType=0 );color:#3D6AFF;
            }   


            .buttonUp {
                border:1px solid #000;font-weight:bold; cursor:pointer; text-shadow:0 1px 1px #000; text-decoration:none;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#DD3B1B), color-stop(100%,#b12f16));background-image:-moz-linear-gradient(top, #b12f16 0%, #DD3B1B 100%);background-image:-webkit-linear-gradient(top, #DD3B1B 0%,#b12f16 100%);background-image:-o-linear-gradient(top, #DD3B1B 0%,#b12f16 100%);background-image:-ms-linear-gradient(top, #DD3B1B 0%,#b12f16 100%);background-image:linear-gradient(to bottom, #DD3B1B 0%,#b12f16 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#DD3B1B', endColorstr='#b12f16',GradientType=0 );color:#000000;
            }

「toggleClass()」を試しましたが、パフォーマンスに影響はありませんでした。

これをさらに最適化するにはどうすればよいですか?

助けてくれてありがとう。

4

1 に答える 1

3

この遅延は意図的に設定されています。約 300ms である必要があります。

ハイブリッド アプリケーションには、ネイティブ アプリケーションに比べて多くの欠点があると考えられています。この場合、問題はクリック イベントの検出とスワイプ イベントです。両方のアクションがインスタントの場合、アプリケーションはスワイプ アクションのクリック イベントと開始イベントを認識できません。このスワイプ アクションにはアドバンテージが必要であり、クリック イベントは少なくとも 300 ミリ秒続く場合にのみ機能します。

click イベントをvclickまたは touchstart イベントに置き換えると修正できます。このイベントには遅延の問題はありません。

これについて詳しく知りたい場合は、クリック/vclick/タップイベントの違いに関する私の他の回答をご覧ください。ここで見つけることができます: jQuery モバイルでは、タップと vclick の違いは何ですか?

一方、すべてをそのままにしたい場合は、Fastclickと呼ばれるこのサードパーティの jQuery Mobile プラグインを使用してこれを修正することもできます。300msそれが何をするかというと、ゴースト クリックや煩わしい遅延のない高速応答ボタンを作成することです。試してみてください、あなたはtiが好きかもしれません。

于 2013-07-11T07:01:53.057 に答える