1

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

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

感谢您的帮助

4

2 回答 2

4

这是一个工作示例：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){
于 2013-04-09T20:19:53.870 回答
3

使用下面定义下一页和上一页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!
}
于 2013-04-09T20:15:12.493 回答