使用滑动更改URL，并控制数据方向

Question

因此，我使用以下jQuery允许用户向左或向右滑动以导航到同一文档中的不同页面。

$('#main').bind('swiperight', function(){
    window.location = '#menu';
});
$('#main').bind('swipeleft', function(){
    window.location = '#showcase';
});
$('#showcase').bind('swiperight', function(){
    window.location = '#main';
});

问题是我无法控制数据的方向。当用户向右滑动时，内容从左向右移动，反之亦然，这是有道理的。

有什么想法吗？

谢谢！

Answer 1

您可以不使用window.location，而是使用以下内容吗：

// swiperight function
$.mobile.changePage("#menu", "slide", true, true);
// swipeleft function
$.mobile.changePage("#showcase", "slide", false, true);

字符串"slide"后面的布尔值指示方向（向前或向后）。

changePage函数上的文档：http://jquerymobile.com/test/docs/api/methods.html

我在这篇文章中找到了这个解决方案的一部分：在jQuery Mobile 中从左到右滑动

Answer 2

试试这个：

$('#main').bind('swiperight', function(){
    $.mobile.changePage("#menu",{
        reverse: true,
        transition: "slide"
});
});
$('#main').bind('swipeleft', function(){
    $.mobile.changePage("#showcase",{
        transition: "slide"
});
});
$('#showcase').bind('swiperight', function(){
    $.mobile.changePage("#main",{
        reverse: true,
        transition: "slide"
});
});

这对我有用！：）