jQuery Mobile 滑动导航异常答案

【问题标题】：jQuery Mobile swipe navigation exceptionjQuery Mobile 滑动导航异常
【发布时间】：2013-04-09 19:57:50
【问题描述】：

我在一个文档中有一系列页面，我利用触摸设备中的滑动从一个页面导航到另一个页面。

我不知道该怎么做，就是在我到达某个页面 id 时停止滑动事件。

这是我在导航中使用的代码：

$('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);
}
});

我正在使用 JQM 1.3

感谢您的帮助

【问题讨论】：

您的问题是什么？如果您显示第一页和最后一页，您的代码已经阻止您滑动，您还想要什么？
对不起，我没有说清楚，我有一些使用点击事件调用的隐藏页面。它们不应该在常规滑动导航中看到，它们被故意放在文档的底部，所以我需要一种方法来防止以这种方式访问这些页面。
我想我理解你想在到达特定页面时向右滑动或向左滑动，我说的对吗？
是的，这正是我要找的

标签： jquery-mobile jquery swipe

【解决方案1】：

这是一个工作示例：http://jsfiddle.net/Gajotres/GXex5/

$(document).off('swipeleft').on('swipeleft', '[data-role="page"]', function(event){    
    if($(this).attr('id') == 'article2') {
        event.preventDefault();
        return false;
    }
    var nextpage = $.mobile.activePage.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;

});

$(document).off('swiperight').on('swiperight', '[data-role="page"]', function(event){   
    var prevpage = $(this).prev('[data-role="page"]');
    if (prevpage.length > 0) {
        $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
    }
    event.handled = true;
});

基本上你只需要这段代码：

if($(this).attr('id') == 'article2') {
    event.preventDefault();
    return false;
}

此代码将检查某些页面是否具有特定名称，如果是，它将阻止默认操作（事件）。也不要忘记在你的代码中传递一个事件对象，所以

改变这个：

$('div.ui-page').live("swiperight", function(){

到这里：

$('div.ui-page').live("swiperight", function(event){

【讨论】：

很棒的例子。我已经在使用此代码。非常感谢

【解决方案2】：

使用下面定义下一个和上一个页面ID，如果它等于你不想显示的页面，什么都不做。

var DoNothing = 'DoNothing';

// fetch ID of next page in DOM
var nextpage = $.mobile.activePage.next('[data-role=page]')[0].id;

// fetch ID of previous page in DOM
var prevpage = $.mobile.activePage.prev('[data-role=page]')[0].id;

// logic
if(nextpage == DoNothing || prevpage == DoNothing) {
// Do nothing!
}

【讨论】：