0

javacsript と jquery を使用して phonegap アプリを作成しています。画像をスワイプするためにこのコードを書きました。

$('#fullscreen').swipeleft(function () {
        //Show next image
        showNext();
        alert('Left');
 });

function showNext() {
$("#fullscreen").attr('src', "images/next.png");
}

しかし、スワイプしても画像が変わらず、「09-13 14:49:21.188: W/webview(20238): Miss a drag as we are waiting for WebCore's response for touch down.」というエラーが表示されます。

いくつかのフォーラムを閲覧した後、次のコードを追加しました。

var fullScr = document.getElementById("fullscreen");
    fullScr.addEventListener( "touchstart", function(e){ onStart(e); }, false );
    function onStart ( touchEvent ) {
      if( navigator.userAgent.match(/Android/i) ) {
        touchEvent.preventDefault();
      }
}

しかし、それでも機能しません。画面の向きを縦から横に変更すると、画像が変わります。向きを変更するとどうなりますか? 同じ向き (縦向き/横向き) で動作させるにはどうすればよいですか?

前もって感謝します。

4

1 に答える 1

0

それはうまくいきました:S ...私はCordovaのバージョン1.5.0を使用し、Androidシミュレーター4.0.3でアプリを実行しました。次の例を試していただけますか？

HTML コンテンツ:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">

        <!--  BASIC INCLUDES - TO BE MODIFIED ACCORDING TO YOUR CONVENIENCE -->

        <link rel="stylesheet" href="./css/jquery.structure-1.1.0.min.css" />
        <link rel="stylesheet" href="./css/jquery.mobile-1.1.0.min.css" />

        <script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
        <script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="./js/jquery.mobile-1.1.0.min.js"></script>

        <!--  END - BASIC INCLUDES -->

        <script type="text/javascript" charset="utf-8">

        $(function() {
            $('#fullscreen').swipeleft(function () {
                //Show next image
                showNext();
            });

            function showNext() {
                $("#fullscreen").attr('src', "./images/next.png");
            }
        });

        </script>
    </head>

    <body>
        <div data-role="page">
            <div data-role="content">
                <img id="fullscreen" src="./images/previous.png"></img>
            </div>
    </div>
    </body>
</html>

注意: 次のことを確認してください。

  • コードの「基本インクルード」のソースを適宜変更してください (jQuery / jQuery Mobile の CSS / JS ファイルのソース)

  • あなたのバージョンが 1.5.0 でない場合は、cordova のバージョンのソースを変更してください

これがあなたにとってもうまくいくことを願っています。とにかく、結果を教えてください。

于 2012-09-14T05:32:16.673 に答える