无法让jQuery Mobile的滑动功能正常工作

Question

无法让jQuery Mobile的滑动功能正常工作

3

新手在此，如果我没有理解发帖的全部正确内容，请谅解... 我浏览了一些页面，试图理解jquery mobile中左右滑动的用法。我访问了这个页面，使用我的脚本-http://designicu.com/jquery-mobile-swipe/ 不管什么愚蠢的原因，我无法使其工作。我确定我错过了一些小而愚蠢的东西... 有人能看出我的问题吗？谢谢

<!DOCTYPE html> 
<html  lang="en">
<head>
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 

    <link rel="stylesheet" href="_/css/jquery.mobile.css" />

    <script src="_/javascript/jquery.js"></script>
    <script src="_/javascript/jquery.mobile.js"></script>

    <script>

    $('div.ui-page').live("swipeleft", function(){
    var nextpage = $(this).next('div[data-role="page"]');
        if (nextpage.length > 0) {
        $.mobile.changePage(nextpage, "slide", false, true);
        }
    });
    $('div.ui-page').live("swiperight", function(){
        var prevpage = $(this).prev('div[data-role="page"]');
        if (prevpage.length > 0) {
        $.mobile.changePage(prevpage, {transition: "slide",
        reverse: true}, true, true);
        }
    });
    </script>

</head>

<body> 

    <div data-role="page" id="editor">
    <div>bucker</div>
    </div>

    <div data-role="page" id="innovation1">
    <div>bunk</div>
    </div>

</body> 
</html>

- user1075004

.live已被弃用(1.7)，并在1.9中删除，请改用.on。 - Arun P Johny

我刚刚删除了本地的jquery mobile脚本、jquery脚本和jquery mobile css文件，并添加了cdn链接，将.live更改为.on，但仍然没有解决问题... - user1075004

我使用的CSS链接是1.3.0.min.css，使用的jQuery链接是1.8.2.min.js，使用的jQuery移动链接是1.3.0.min.js，在头部按照这个顺序包含上述脚本... 我认为jQuery和jQuery移动都很重要/必要吗？... - user1075004

日志中没有显示任何错误。 - user1075004

感谢Arun的建议。感谢1167442的建议，我明天会尝试你的解决方案，现在太晚了，我已经筋疲力尽，非常沮丧！最终我找到了另一个同样有效的解决方案。http://jsfiddle.net/GYAB7/2/虽然它确实起作用，但如果我能让原始选项为我工作，我更喜欢原始选项，因为fiddle解决方案虽然有效，但原始选项似乎更灵活。再次感谢你们的帮助！ - user1075004

显示剩余4条评论

1个回答

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

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

- Gajotres · Accepted Answer

我做了一个可工作的示例： http://jsfiddle.net/Gajotres/NV6Py/

$(document).on('swipeleft', '[data-role="page"]', function(event){    
    if(event.handled !== true) // This will prevent event triggering more then once
    {    
        var nextpage = $(this).next('[data-role="page"]');
        // swipe using id of next page if exists
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
        }
        event.handled = true;
    }
    return false;         
});

$(document).on('swiperight', '[data-role="page"]', function(event){   
    if(event.handled !== true) // This will prevent event triggering more then once
    {      
        var prevpage = $(this).prev('[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
        }
        event.handled = true;
    }
    return false;            
});

你的版本运行良好。我仅使用jQuery 1.8.2和jQuery Mobile 1.2替换了js和css初始化。看一下这里：

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

    <script>

    $('div.ui-page').live("swipeleft", function(){
    var nextpage = $(this).next('div[data-role="page"]');
        if (nextpage.length > 0) {
        $.mobile.changePage(nextpage, "slide", false, true);
        }
    });
    $('div.ui-page').live("swiperight", function(){
        var prevpage = $(this).prev('div[data-role="page"]');
        if (prevpage.length > 0) {
        $.mobile.changePage(prevpage, {transition: "slide",
        reverse: true}, true, true);
        }
    });
    </script>

</head>

<body> 

    <div data-role="page" id="editor">
        <div>bucker</div>
    </div>

    <div data-role="page" id="innovation1">
        <div>bunk</div>
    </div>

</body> 
</html>