0

我已经使用以下代码实现了页面滑动。 

<!DOCTYPE html> 
<html> 
<head> 
    <title>Swipe Example</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="cordova.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery/css/jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" charset="utf-8" src="jquery/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="jquery/jquery.mobile-1.3.2.min.js"></script>
    <script>
        function onBodyLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }
        function onDeviceReady() {
            // set your swipe threshold explicitly
            $.event.special.swipe.horizontalDistanceThreshold = 120;
            $(document).on("swiperight", "#home", function() {
                $.mobile.changePage("#page1");
            });
            $(document).on("swipeleft", "#page1", function() {
                $.mobile.changePage("#home");
            });
        }
    </script>
</head> 
<body onload="onBodyLoad()">
    <div data-role="page" id="home">
        <div data-role="content">
            <p>
                <ul data-role="listview" data-inset="true" data-theme="c">
                    <li id="listitem">Swipe Right to view Page 1</li>
                </ul>
            </p>
        </div>
    </div>
    <div data-role="page" id="page1">
        <div data-role="content">
            <ul data-role="listview" data-inset="true" data-theme="c">
                <li data-role="list-divider">Navigation</li>
                <li><a href="#home">Back to the Home Page</a></li>
            </ul>
            <p>
                Yeah!<br />You Swiped Right to view Page 1
            </p>
        </div>
    </div>
</body>

使用上面的代码，我可以通过滑动来移动前后页面。

以下是我的几个查询

  1. 假设如果要在滑动视图中实现 10 个页面，我需要编写 15 个以上的方法来在左右滑动时移动哪个页面。是否有任何其他简单的选项，如数组适配器来添加所有页面？
  2. 假设如果我移动这些页面六次，之后如果我按返回键关闭应用程序，则两个相同的页面显示六次。但它应该只显示一次，并且需要在第三次点击时退出应用程序。
    如何实施？
4

1 回答 1

1

对于问题 1，这是一个工作示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet"  href="jquery.mobile-1.3.2.css">
    <script type="text/javascript" src="cordova.js"></script>
    <script src="jquery-1.10.2.min.js" language="javascript" type="text/javascript"></script>
    <script src="jquery.mobile-1.3.2.min.js" language="javascript" type="text/javascript"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <title>AnimeAddicts - Menü</title>
  </head>
  <script language="javascript1.7">
        function onBodyLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }

        var pageIds = new Array("#home", "#page1", "#page2", "#page3", "#page4"); // add page id's here, if page id doesn't here, it won't swipe that page
        var pageSwipeSet = new Array(new Array(), new Array()); // this is only to know, which page has swipe function. this need, because if we doesn't use this it will add more then one listener for one or more page and it will bugging
        var actPageNum = 0; // current page

        function onDeviceReady() {
            // set your swipe threshold explicitly
            $.event.special.swipe.horizontalDistanceThreshold = 120;

            swipeFunction();
        }

        function swipeFunction(){
            if(actPageNum>0 && !pageSwipeSet[0][actPageNum-1]){
                var previous = pageIds[actPageNum-1];
                var previousActual = pageIds[actPageNum];
                $(document).on("swipeleft", previousActual, function() {
                    $.mobile.changePage(previous);
                    actPageNum--;
                    swipeFunction();
                });
                pageSwipeSet[0][actPageNum-1] = true;
            }
            if(actPageNum<pageIds.length-1 && !pageSwipeSet[1][actPageNum+1]){
                var next = pageIds[actPageNum+1];
                var nextActual = pageIds[actPageNum];
                $(document).on("swiperight", nextActual, function() {
                    $.mobile.changePage(next);
                    actPageNum++;
                    swipeFunction();
                });
                pageSwipeSet[1][actPageNum+1] = true;
            }
        }
    </script>
</head> 
<body onload="onBodyLoad()">
    <div data-role="page" id="home">
        <div data-role="content">
            <p>
                <ul data-role="listview" data-inset="true" data-theme="c">
                    <li id="listitem">Swipe Right to view Page 1</li>
                </ul>
            </p>
        </div>
    </div>
    <div data-role="page" id="page1">
        <div data-role="content">
            <ul data-role="listview" data-inset="true" data-theme="c">
                <li data-role="list-divider">Navigation</li>
                <li><a href="#home">Back to the Home Page</a></li>
            </ul>
            <p>
                Yeah!<br />You Swiped Right to view Page 1
            </p>
        </div>
    </div>
    <div data-role="page" id="page2">
        <div data-role="content">
            <ul data-role="listview" data-inset="true" data-theme="c">
                <li data-role="list-divider">Navigation</li>
                <li><a href="#home">Back to the Home Page</a></li>
            </ul>
            <p>
                Yeah!<br />You Swiped Right to view Page 2
            </p>
        </div>
    </div>
    <div data-role="page" id="page3">
        <div data-role="content">
            <ul data-role="listview" data-inset="true" data-theme="c">
                <li data-role="list-divider">Navigation</li>
                <li><a href="#home">Back to the Home Page</a></li>
            </ul>
            <p>
                Yeah!<br />You Swiped Right to view Page 3
            </p>
        </div>
    </div>
    <div data-role="page" id="page4">
        <div data-role="content">
            <ul data-role="listview" data-inset="true" data-theme="c">
                <li data-role="list-divider">Navigation</li>
                <li><a href="#home">Back to the Home Page</a></li>
            </ul>
            <p>
                Yeah!<br />You Swiped Right to view Page 4
            </p>
        </div>
    </div>
</body>

当您滑动 :D 时，此脚本会添加左右滑动。经测试。

对于问题 2。在 phonegap 中，您可以使用此事件侦听器：

document.addEventListener("backbutton", yourCallbackFunction, false);

您需要创建一个历史变量，当您在页面上滑动时，您会在其上添加新元素。当您按下后退按钮时，您会从中读取，然后转到该页面。你在上面存储多少（以及你在上面存储什么），这是你的选择。但我不确定这会起作用，主要是通过后退按钮按下。

于 2013-09-03T22:57:35.127 回答