jQuery Mobile滑动功能无法使用。

Question

jQuery Mobile滑动功能无法使用。

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>

- Ashwin

什么小提琴？你是否真的将文件添加到了服务器上？如果在普通电脑上查看控制台，是否有任何错误？ - mplungjan

这段代码对我来说甚至都不能工作，即使我应用了被接受的解决方案。 - Black

2个回答

-2

这个问题也让我很烦恼...我不需要像之前的帖子中建议的那样使用.on('pageinit')。事实证明，我的JQuery语法是正确的，但大小写敏感性是我的问题。'swiperight'不起作用，但'swipeRight'可以！下面的代码对我有用，并且还解决了Swipe在移动浏览器中阻止上下文滚动的问题。一定要分别指定swipeRight和swipeLeft方法，而不是一个通用的'swipe'类，你就可以开始了！*请注意底部的排除元素行，注意我从列表中取出了'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
      });
});

- Victor

1

这个问题是关于jQuery mobile，而不是touchSwipe library的。-1 - user4227915

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jai · Accepted Answer

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

$(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>