Jquery mobile 如何在多个jquery移动页面之间滑动？

以下是代码摘录，可用于2页：

$（文档）.ready（函数（）{
window.now=1；
$（'#device1'）.live（“swipeleft”，function（）{
窗口，现在++
$.mobile.changePage（#device+window.now，“slide”，false，true）；
});
$（“#设备2”）.live（“swiperight”，function（）{
窗口，现在--；
$.mobile.changePage（#device“+window.now，“slide”，true，true）；
});    
});
...
...
...

---

如何使处理大量页面变得更加通用？

这似乎是您想要的

<script>
$(document).ready(function() {

    $('.ui-slider-handle').live('touchstart', function(){
        // When user touches the slider handle, temporarily unbind the page turn handlers
        doUnbind();
    });

    $('.ui-slider-handle').live('mousedown', function(){
        // When user touches the slider handle, temporarily unbind the page turn handlers
        doUnbind();
    });

    $('.ui-slider-handle').live('touchend', function(){
        //When the user let's go of the handle, rebind the controls for page turn
        // Put in a slight delay so that the rebind does not happen until after the swipe has been triggered
        setTimeout( function() {doBind();}, 100 );
    });

    $('.ui-slider-handle').live('mouseup', function(){
        //When the user let's go of the handle, rebind the controls for page turn
        // Put in a slight delay so that the rebind does not happen until after the swipe has been triggered
        setTimeout( function() {doBind();}, 100 );
    });

    // Set the initial window (assuming it will always be #1
    window.now = 1;

    //get an Array of all of the pages and count
    windowMax = $('div[data-role="page"]').length; 

   doBind();
});
    // Functions for binding swipe events to named handlers
    function doBind() {
        $('div[data-role="page"]').live("swipeleft", turnPage); 
        $('div[data-role="page"]').live("swiperight", turnPageBack);
    }

    function doUnbind() {
        $('div[data-role="page"]').die("swipeleft", turnPage);
        $('div[data-role="page"]').die("swiperight", turnPageBack);
    }

    // Named handlers for binding page turn controls
    function turnPage(){
        // Check to see if we are already at the highest numbers page            
        if (window.now < windowMax) {
            window.now++
            $.mobile.changePage("#device"+window.now, "slide", false, true);
        }
    }

    function turnPageBack(){
        // Check to see if we are already at the lowest numbered page
        if (window.now != 1) {
            window.now--;
            $.mobile.changePage("#device"+window.now, "slide", true, true);
        }
    }
</script>

$（文档）.ready（函数（）{
$（'.ui滑块句柄'）.live（'touchstart'，function（）{
//当用户触摸滑块控制柄时，暂时解除翻页处理程序的绑定
doUnbind（）；
});
$（'.ui滑块句柄'）.live（'mousedown'，function（）{
//当用户触摸滑块控制柄时，暂时解除翻页处理程序的绑定
doUnbind（）；
});
$（'.ui滑块句柄'）.live（'touchend'，function（）{
//当用户松开手柄时，重新绑定翻页控件
//稍微延迟一下，以便在刷卡触发之前不会重新绑定
setTimeout（函数（）{doBind（）；}，100）；
});
$（'.ui滑块句柄'）.live（'mouseup'，function（）{
//当用户松开手柄时，重新绑定翻页控件
//稍微延迟一下，以便在刷卡触发之前不会重新绑定
setTimeout（函数（）{doBind（）；}，100）；
});
//设置初始窗口（假设它始终为#1
window.now=1；
//获取所有页面的数组并计数
windowMax=$（'div[data role=“page”]）。长度；
doBind（）；
});
//用于将滑动事件绑定到命名处理程序的函数
函数doBind（）{
$（'div[data role=“page”]）.live（“swipeleft”，翻页）；
$（'div[data role=“page”]）.live（“swiperight”，翻页）；
}
函数doUnbind（）{
$（'div[data role=“page”]）.die（“swipeleft”，翻页）；
$（'div[data role=“page”]）.die（“swiperight”，翻页）；
}
//用于绑定翻页控件的命名处理程序
函数翻页（）{
//查看我们是否已经在最高数字页面
如果（window.now

更新：我用iPhone emulator和Android emulator对此进行了测试，它在这两个平台上都能正常工作。

---

更新：更改答案以解决用户关于使用滑块导致向左/向右滑动的评论。

此代码也适用于滑动

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

$（'div.ui-page'）.live（“swipeleft”，函数（）{
var nextpage=$（this.next（'div[data role=“page”]）；
如果（下一页长度>0）{
$.mobile.changePage（下一页，“幻灯片”，假，真）；
}
});
$（'div.ui-page'）.live（“swiperight”，函数（）{
var prevpage=$（this.prev（'div[data role=“page”]”）；
如果（prevpage.length>0）{
$.mobile.changePage（上一页{
过渡：“幻灯片”，
相反：正确
}，对，对）；
}
});

我用它来处理大量的页面。来自iScroll的创建者。

谢谢。这就是我一直在寻找的，它工作得非常完美。但是，我遇到了一个问题-当我移动滑块时（在同一页面上）在左边，也会出现swipeleft。如何避免这种情况？哇，这是一个很难解决的问题。不过我认为这会起作用。在评论中的解释Hanks，Jason。它起作用。但看起来这不是一个很好的方法（在PC上不起作用；如果你没有错误地触摸滑块和背景，它会改变页面）。似乎我需要为这些手势创建特殊区域。试图找出如何创建该区域以占用剩余空间。哦，我没有意识到它也需要在PC上工作。我只是再次更新了我的答案以处理该问题。它在Chrome中对我非常有效。有人可以设置JSFIDLE吗？我无法让它工作>\u请显示您的代码您是如何让swipeview使用jQuery移动页面转换的。关于swipeview的文档不存在。抱歉-我最终因为我的特殊情况放弃了swipeview。不过我需要重新考虑这个问题。。。