Question

我正在为项目创建自己的图库。为此，我需要滑动事件。所以在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>

Answer 1

尝试使用jQuery mobile的pageinit处理程序：

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

Docs for pageinit @ jquery mobile。

来自文档：

Take a look at Configuring Defaults

由于jquery-mobile事件是立即触发的，因此您需要在加载jQuery Mobile之前绑定事件处理程序。按以下顺序链接到JavaScript文件：
<script src="jquery.js"></script>  
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

Answer 2

这也让我疯狂......我没有像前一篇文章所建议的那样使用。（＆＃39; pageinit＆＃39;）。事实证明我的语法在我的JQuery中是正确的，但CASE SENSITIVTY是我的问题。＆＃39; swiperight＆＃39;没有工作，但是＆＃39; swipeRight＆＃39;没有！下面的代码对我有用，并且还修复了Swipe防止在移动浏览器中上下文档滚动的问题。请务必单独指定swipeRight和swipeLeft方法，而不是一次通用＆＃39;滑动＆＃39;上课，你很高兴去！ *记下底部的排除元素行，请注意我采取的跨越＆＃39;在列表之外，允许滑动常用的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
      });
});

jQuery Mobile滑动无法正常工作

2 个答案: