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. これらのページを 6 回移動した後、戻るキーを押してアプリケーションを閉じると、2 つの同じページが 6 回表示されているとします。ただし、表示されるのは 1 回だけで、3 回目のクリックでアプリを終了する必要があります。
    それを実装する方法は？
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 に答える