Question

我有一个页面，向左滑动将显示下一页（不同的网址），在下一页上，向右滑动将返回上一页。代码第一次很漂亮。但是，下一次它不起作用！如果我手动刷新页面，它会再次开始工作......所以它必须是初始化问题。我相信你们中的一些人肯定在某个时候遇到过这个问题。对于那些拥有的人，我想问你 - 实现这样一个功能的正确方法是什么？

Answer 1

这是我最终使用的：

$(document).bind("pageinit", function(event) {
    var count = 1;
    var nextPage;
    var prevPage;

    //build 1st page of results
    nextPage = "page-"+count+".html";
    $("#showList").load(nextPage,function(){
        $('#showList').trigger('create');
    });

    //detect swipeleft
    $("#showList").bind("swipeleft",function(event) {
        //verify if there is next page
        if(count < 3) {
            // go to next page
            count++;
            nextPage = "page-"+count+".html";
            $("#showList").load(nextPage,function(){
                alert(nextPage+" loaded");
                $('#resultList').trigger('create');
            });
        } else {
            //else notify user he has reached end of results
            alert("Reached end of results");
        }
    });
    //detect swiperight
    $("#showList").bind("swiperight",function(event) {
        //verify it's not 1st page
        if(count > 1) {
            count--;
            prevPage = "page-"+count+".html";
            //go to previous results page
            $("#showList").load(prevPage,function(){
                alert(prevPage+" loaded");
                $('#showList').trigger('create');
            });
        } else {
            //else notify user he's on 1st page
            alert("You are on the 1st page");
        }
    });
});

其实质上使用2个滑动事件 - swipeleft和swiperight - 仅更新列表中单个项目出现的部分，即<ul id ="showList">和</ul>之间。滑动每次都在工作。

部分解决方案来自此处：http://blog.stikki.me/2011/08/18/loading-dynamic-content-in-jquery-mobile-with-jquerys-load-function/

这适合我的实施，但另一方面是URL在页面中保持不变。

我仍然愿意接受任何其他解决方案。

jquery mobile：“swipeleft”和“swiperight”只能工作一次

1 个答案: