20

jQuery モバイル アプリケーションに大きな問題があります。カスタム関数 (onClick によってトリガーされる) を使用して、currentPage でページを切り替えています。

統合ブラウザを使用して (ajax 要求により) 変更されたサイトの Android デバイスでのみ発生します。iOS と Chrome は問題なく動作します。

要素をクリックした後、アニメーションが開始されましたが、終了する直前に元のページに戻ります。0.5 秒後、新しいものに戻ります。

ここでバグの動画を作成しました: http://www.youtube.com/watch?v=sXxvVUxniNg

どうもありがとうございました

コード (CoffeeScript):

class Guide

    @categoriesLoaded = false

    @loadSearch: ->

        $.mobile.changePage $("#guide"),
            transition: 'slide'
            changeHash: false

        if !@categoriesLoaded

            @categoriesLoaded = true

            GuideApi.getCategories (data) ->
                output = Mustache.render $("#tmpl-guide-categories-select").html(), 
                    categories: data

                $("#guide-search-category").append output

                $("#guide-search-category").val($("#guide-search-category option:first").val());

window.WgSwitchGuide = ->
        Guide.loadSearch
4

6 に答える 6

10

私は同じ問題を抱えていました。そして、私はすべてを試しましたが、最終的に解決策で終わります。私が見つけたのは、エラーが主にブラウザ内にあるということでした。そこで、pushStateEnabled の構成を false に設定しました。このスクリプトを追加して、次のことを行いました。

<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.pushStateEnabled = false;
});
</script>

jquery-mobile スクリプトが呼び出される前に追加する必要があります。詳細については、 JQuery の説明で確認できます。

そして、それはもはや問題を解決しました。

于 2013-07-10T03:57:27.863 に答える
4

最初のページのクリック イベントにイベント stopPropagation および preventDefault メソッドを追加してみませんか? このようにして、クリック イベントのデフォルト アクションはトリガーされません。さらに、stopPropagation は、イベントが DOM ツリーをバブリングするのを防ぎ、親ハンドラーにイベントが通知されるのを防ぎます。

  • event.stopPropagation();
  • event.preventDefault();

例：

$("p").click(function(event){
    event.stopPropagation();
    event.preventDefault();
    // change page
});
于 2013-02-24T16:45:04.677 に答える
4

AndroidとiOSの両方でまったく同じ問題が発生していました。私にとっては、重いページ、つまり複雑な要素を含むページなどで発生していました。「スライド」トランジションを使用しているように見えますが、これは私が使用していたものでもありました。これらのページのページ遷移 (つまり、$.mobile.changePage("page.html", { transition: "none" })) を取り出すと、この問題は解決しました。お役に立てれば。

トランジションを保持したい場合は、前のページが表示されているときに $.mobile.loadPage を使用して最初にページをプリロードしてからトランジションを表示できます。私自身もこのルートを検討していますが、おそらく試してみる価値があります。

編集: OK - 最後の提案を調査しましたが、これは機能していないようです。最初のオプションに固執します。

于 2013-01-09T07:17:45.340 に答える
2

これに対する解決策を見つけるために何週間も試みた後、JQM ライブラリを改ざんしてページ遷移を次々と無効にすることになりました。それは良い解決策ではありませんが、私が仕事に取り掛かることができる唯一のものです。

$.mobile.changePage とアンカー リンクの両方で、ページがジャンプ バックしていました。スライドトランジションを使用しましたが、削除しても問題は解決しませんでした。pushStateEnabled を false に設定しても機能しませんでした。ジャンプはすべてのデバイスとブラウザーで発生していました (とにかくテストしました)。

そこで、JQM ライブラリ (v1.3.2) に対して行ったことを次に示します。

$.mobile.changePage 関数を定義する前に、次を追加しました。

var justChangedPage = false;

次に、関数内に次の行があります。

if ( pbcEvent.isDefaultPrevented()) {
    return;
}

私が変更したもの：

if ( pbcEvent.isDefaultPrevented() || justChangedPage) {
    return;
}

$.mobile.changePage 関数のこの部分の直後:

if ( toPage[ 0 ] === $.mobile.firstPage[ 0 ] && !settings.dataUrl ) {
    settings.dataUrl = documentUrl.hrefNoHash;
}

追加した：

justChangedPage = true;
setTimeout(function() {
    justChangedPage = false;
}, 500);

(関数の前半にそれを入れてもうまくいきませんでした.1回のページ遷移内ですべてのものを複数回実行します.0.5秒は、ページジャンプを防ぐ最小タイムアウトのようです.)

ハッキングであっても、これが誰かの助けになることを願っています...

于 2013-11-25T22:26:37.290 に答える
0

JQMとAndroidのバージョンは何ですか？

正しく理解できているかわかりません。トランジションフリッカーは、次のような仮定から来ているのではないかと思います。

  1. 重いページのDOM遷移。
  2. cssファイルのどこかで「translate3d」を使用します。
  3. 「H/Wアクセラレーション」機能を使用していません。この行をAndroidManifest.xmlに追加して有効にします。<application>

android：hardwareAccelerated = "true"

于 2013-02-27T09:10:19.577 に答える
-1

私はまったく同じ動作に遭遇しましたが、同じ問題を抱えている人はほとんどいないようです. 最初はjQueryモバイルライブラリが原因だと思っていました。後で、問題の原因を突き止めましたが、それは自分のコードのバグです。問題を説明するためにデモを作成しました。

http://jsfiddle.net/pengyanb/6zvpgd4p/10/

同じように悩んでいる人のヒントになれば幸いです。

$(document).on('pagebeforeshow', '#page2', function(){
    console.log('Page2 before show');
    var htmlGeneratedOnTheFly = '<ul data-role="listview" data-inset="true">';
    for(var i=0; i<4; i++)
    {
        htmlGeneratedOnTheFly += '<li><a>Random html element</a></li><li data-role="list-divider"></li>';
    }
    htmlGeneratedOnTheFly += '</div>';
    $('#page2UiContent').empty();
    $('#page2UiContent').append(htmlGeneratedOnTheFly);
    $('#page2UiContent').trigger('create');
    
   
    //////////////////////////////////////////////////
    //The following section is where the bug is generated. 
    //Each on "page2 before show event" will add a OK Button click handler. 
    //The handlers never get cleared.
    //More and more handler is added to the Page2 OK button as pages going back and forth.
    //Open the browser's console window to see multiple "Page 2 OK Button clicked!!!" lines on one button click. 
    //To fix the bug, move the following section out of the $(document).on('pagebeforeshow', '#page2', function(){});
    //////////////////////////////////////////////////
    $('#page2OkButton').click(function(){
        console.log("Page 2 OK Button clicked!!!");
        $.mobile.changePage('#page1', {transition:"flip"});
    });
    //////////////////////////////////////////////
    //////////////////////////////////////////////
});
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" rel="stylesheet"/>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-role="page" id="page1" data-theme="a">
    <div data-role="header" data-position="fixed">
        <h5>Demo Page 1</h5>
    </div>
    <div data-role="main" class="ui-content">
        <h2>jQuery mobile changepage jumps back to old page demo</h2>
        <p>Click "Go To Page 2" button to go to page2</p>
        <p>On Page2 click Ok Button to come back to page1</p>
        <p>Keeping going back forth between two pages for few times.</p>
        <p>Eventually, you will find that clicked on "Go To Page2" button to flip to Page2 but it soon jumps back to page1 automatically. </p>
        <h2>Please read the comments in the javascript for explaination</h2>
        <a href="#page2" data-transition="flip" class="ui-btn ui-icon-carat-r ui-btn-icon-right">Go To Page 2</a>
    </div>
</div>

<div data-role="page" id="page2" data-theme="a">
    <div data-role="header" data-position="fixed">
        <h5>Demo Page 2</h5>
    </div>
    <div id="page2UiContent" data-role="main" class="ui-content">
    </div>
    <div data-role="footer" data-position="fixed" style="text-align:center;">
        <div data-role="navbar">
            <ul>
                <li><a id="page2OkButton" class="ui-btn ui-icon-check ui-btn-icon-left">OK</a></li>
            </ul>
        </div>
    </div>
</div>

于 2015-07-28T04:29:48.737 に答える