1

私は、ページの1つが非常に長いモバイルページアプリケーションに取り組んでいます（このページは非常に長いため、上から端まで表示する必要がある場合は、iPhoneで6回スクロールする必要があります）。

このページが読み込まれると、ジャンプして落ち着きます。またはロード後にちらつき、ユーザーに非常に迷惑です。

このページのデータは実行時にレンダリングされます。空のdiv要素があり、実行時にjquerypageshowイベントを使用してフィールド名と値を入力します。

レンダリングされているデータの一部を削除して長さを短くすると、このちらつきが消えることがわかりましたが、それはできません。

ビジネスはデザインを変更したくないので、このちらつきを防ぐためにさまざまなトリックを試しましたが、アイデアが足りなくなり、ページが完全に読み込まれるまでページの表示を遅らせてみましたが、機能しませんけれど

このページのちらつきを防ぐための解決策はありますか？

ありがとうイラ

4

3 に答える 3

4

あなたが言及しているのは、よく文書化されており、ここで数回尋ねられているため、「点滅」と呼ばれています。

iPad のページ遷移で jQuery Mobile が点滅する

jQueryMobile ページのナビゲーションでトランジションが点滅する

https://github.com/jquery/jquery-mobile/issues/4024

PhoneGap で構築されたアプリを使用して、Android フォン (v4.0.4) で同じ問題が発生しました。メインページ (長い を含むdata-role="listview") への/からの遷移により、実行前に画面が点滅します。私のトリックはuser-scalable=no、ビューポートのメタタグに追加することでした:

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1" />

他の人は jQuery モバイル css をオーバーライドしたり、ページ遷移を完全に無効にしたりすることで成功しました:

CSS

.ui-page {
    -webkit-backface-visibility: hidden;
}

JS

$(document).bind("mobileinit", function () {
    $.mobile.defaultPageTransition = "none";
});
于 2012-12-17T06:46:57.203 に答える
0

jQuery Mobileの場合は、footer 永続的にして、その部分がアニメーション化されないようにします。

<div data-role="footer" data-id="foot" data-position="fixed">
  <h4>Page 1 Footer</h4>
</div><!-- /footer -->

jsFiddleデモ

編集：最新の開発

上記のjsFiddlejQueryMobileデモは、jQueryMobile1.2.0でjQuery1.7.2を使用するように改訂されました。

jQuery1.8.2およびjQueryMobile1.2.0でjsFiddleを使用すると、そのjsFiddle内の関数の使用中にoverflowがに設定されている場合、意図したとおりに機能しないことがわかりました。hiddenscrollBars

その機能は、jQueryアニメーション中にブラウザーのスクロールバーを非表示にして、ページ変更のアニメーション期間中に要素が一時的にジャンプするのを防ぐことです。

ブラウザのスクロールバーは実際には非表示になっていますが、bodyセクション内の要素は、スクロールバーがまだ存在しているかのように「ジャンプ」し続けます。

これは、jsFiddlejQueryが1.7.2に設定されている場合は発生しません。

于 2012-12-17T02:56:24.513 に答える
0

すべてのデータが読み込まれるまで、小さな読み込みアイコンを実装できます。これにより、ユーザーは見た目が悪くなりますが、それでもビジネス要件に沿ったものになります。

ラッパーdivが表示されていないことに沿った何か。ロード時に、loadingdivはloading.pngの背景画像で表示されます。コンテンツがロードされたら、ラッパーdivを設定して、ロード中のdivを表示および削除します。

別の方法でデータをロードする方が良いでしょうが、それが常に可能であるとは限らないことを私は理解しています。

于 2012-12-17T00:16:10.350 に答える