8

我正在为一个项目创建自己的图片库。为此，我需要滑动事件。所以在 jsfiddle 上找到了下面的代码。插入所有必要的文件。它显示了列表和所有..但是滑动仍然不起作用.? 我在正确的地方编写 jquery 代码吗？还是有什么不对？这是我的代码：

    <html>
        <head>
        <meta charset="utf-8" />
        <title>Home</title>
        <!-- Meta viewport tag is to adjust to all Mobile screen Resolutions-->
        <meta name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1" />

        <link rel="stylesheet" type="text/css" href="Css/style.css" />
        <link rel="stylesheet" type="text/css" href="Css/Jstyle.css" />
        <link rel="stylesheet" type="text/css" href="Css/jquery.mobile.theme-1.2.0.css" />
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />

        <script type="text/javascript" src="Javascript/jquery1.js"></script>
        <script type="text/javascript" src="Javascript/jquery2.js"></script>
        <script type="text/javascript" src="css/jq1.6.2.js"></script>

        <script type="text/javascript">
        $("#listitem").swiperight(function() {
            $.mobile.changePage("#page1");
        });
        </script>  

        </head>
        <body>

            <div data-role="page" id="home"> 
            <div data-role="content">

                    <ul data-role="listview" data-inset="true">
                        <li id="listitem"> Swipe Right to view Page 1</a></li>
                    </ul>

            </div>
        </div>

        <div data-role="page" id="page1"> 
            <div data-role="content">

                <ul data-role="listview" data-inset="true" data-theme="c">
                    <li id="listitem">Navigation</li> 

                </ul>

                <p>
                     Page 1
                </p>
            </div>
        </div>

        </body>
4

2 回答 2

14

尝试使用pageinitjQuery mobile 的处理程序：

$(document).on('pageinit', function(event){
   $("#listitem").swiperight(function() {
        $.mobile.changePage("#page1");
    });
});

pageinit @ jquery mobile 的文档。

从文档：

看看配置默认值

因为 jquery-mobile 事件会立即触发，所以您需要在加载 jQuery Mobile 之前绑定您的事件处理程序。按以下顺序链接到您的 JavaScript 文件：

<script src="jquery.js"></script>  
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
于 2013-02-18T09:39:30.327 回答
-3

这也让我发疯了。我不必像上一篇文章中建议的那样使用 .on('pageinit') 。原来我的语法在我的 JQuery 中是正确的，但 CASE SENSITIVTY 是我的问题。'swiperight' 不起作用，但 'swipeRight' 起作用了！下面的代码对我有用，还解决了在移动浏览器中滑动阻止文档向上和向下滚动的问题。确保单独指定 swipeRight 和 swipeLeft 方法，而不是一个通用的“swipe”类，你就可以开始了！* 注意底部的 Exclude Elements 行，注意我从列表中删除了“span”，以允许在常用的 span 元素上滑动。

$(function() {  

      $('.yourclassname').swipe( 
      {
        swipeLeft:function(event, direction, distance, duration, fingerCount) 
        {
            // do your swipe left actions in here, animations, fading, etc..
            alert(direction);
        },
        swipeRight:function(event, direction, distance, duration, fingerCount) 
        {
            // do your swipe right actions in here, animations, fading, etc..
            alert(direction);
        },
        threshold:4,
        // set your swipe threshold above

        excludedElements:"button, input, select, textarea"
        // notice span isn't in the above list
      });
});
于 2015-06-17T02:58:14.213 回答