Question

我在一个文档中有一系列页面，我在一个页面之间导航，使用触摸设备中的滑动。

我不知道该怎么做，就是在我达到某个页面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

感谢您的帮助

Answer 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){

Answer 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!
}

jQuery Mobile滑动导航异常

2 个答案: