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

【问题标题】：Use swipe to change URL, plus have control over data-direction使用滑动更改 URL，并控制数据方向
【发布时间】：2012-02-12 23:10:19
【问题描述】：

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

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

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

有什么想法吗？

谢谢！

【问题讨论】：

我不明白这个问题。如果可以触发向右滑动，为什么不从左向右滑动呢？

标签： jquery mobile jquery-mobile mobile-safari

【解决方案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

我在这篇文章中找到了这个解决方案的一部分：sliding left to right transition in jQuery Mobile

【讨论】：

感谢@shanabus 提供的信息。这实际上和我已经拥有的一样，所以我仍然有同样的问题。我已将文件上传到voyced.com/mobile。问题是当页面第一次加载并且您向右滑动时，方向向左。返回主页并再次向右滑动后，它可以正常工作。奇怪！？

【解决方案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"
});
});

这对我有用！ :)

【讨论】：