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，请更改科尔多瓦版本的来源

希望这对你也有用。不管怎样，让我知道你的结果。

于 2012-09-14T05:32:16.673 回答