0

monacaIDE+genymotionで開発しています。
onsenUIのタブバーをベースに、ある特定タブでは、左右のスワイプでタブ切り替えとは別のページ遷移をさせたいと考えています。

<ons-gesture-detector>がうまく動かなかったため、jQueryを使って以下のようにスワイプを検出するコードを見つけ、タブバーと組み合わせようとしたのですが、スワイプでの遷移のための<ons-navigator>、タブ遷移の<ons-tabber>ともに組み合わせると動作しません。

スワイプとタブバーを組み合わせる方法をお教えいただきたいです。
宜しくお願い致します。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript"></script>


    <script>
        ons.bootstrap();


         $(function() {
          var box = $("#touchBox")[0];
          box.addEventListener("touchstart", touchHandler, false);
          box.addEventListener("touchmove", touchHandler, false);
          box.addEventListener("touchend", touchHandler, false);
        });

        var xPos = 0;
        var currentPos = 0;
        function touchHandler(e){
          e.preventDefault();
          var touch = e.touches[0];

          if(e.type == "touchstart"){
                xPos = touch.pageX;
            }
          if(e.type == "touchmove"){
                currentPos = touch.pageX;
            }
          if(e.type == "touchend"){
                if (xPos < currentPos) {
                    alert("right swipe");
                    //ページ移動させたい
                    monaca.pushPage('page1.html');

                }else if(currentPos!=0){
                       alert("left swipe"); 

                }
                 xPos = 0;
                 currentPos = 0;
            }
        }
    </script>

</head>
<body>


   <!-- <ons-navigator title="Navigator" var="myNavigator"></ons-navigator> -->

    <!--スワイプする部分-->
      <div id="touchBox" style="cursor:move; z-index:1; border:1px solid #FFF; width=400px; height=400px; background-color: #000;">
            ------------------</br>
            ------------------</br>
       </div>

    <!--
     <ons-tabbar var="tabbar">
        <ons-tabbar-item
            icon="home"
            label="Home"
            page="page1.html"
            active="true"></ons-tabbar-item>
        <ons-tabbar-item
            icon="comment"
            label="Comments"
            page="page2.html"></ons-tabbar-item>
        <ons-tabbar-item
            icon="gear"
            label="Settings"
            page="page2.html"></ons-tabbar-item>
    </ons-tabbar>

      -->

</body>
</html>

4/5追記

下記のようなコードに変更したところ、自己解決しました。

4/6追記
回答欄にコードを転記しました。

2
  • 1
    自己解決の場合も回答欄に記載すべきだと思います。その際に、どこに問題があり、どう解決したか記載すればほかの方が見た場合に役立つのではないでしょうか?
    – otak-lab
    2016年4月5日 10:51
  • ありがとうございます! 回答欄の方に転記しました。 2016年4月6日 0:58

1 件の回答 1

1

下記のコードで自己解決しました。
変更点は大きく分けて、

・スワイプの判定にaddEventListenerを使用していたものを、$(document).on関数を使用
・jQueryのバージョンを新しくした
・画面遷移処理でmonaca.pushPagemyNavigator.pushPageに変更
・tabbarはonsenUIのテンプレートをそのまま使用

というような点です。

containerというクラス名を付けたdivに対してスワイプを検知しています。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script>
        ons.bootstrap();



        $(document).on("touchstart",".container",function(event){
             var pos = position(event);
             $(document).data("memory",pos.x);

        });

        $(document).on("touchmove",".container",function(event){
            var pos = position(event);
            if($(document).data("memory")-pos.x>30){
                //左に移動

                    myNavigator.pushPage('new_page.html');







            }else if($(document).data("memory")-pos.x<-30){
                //右に移動
                var page=myNavigator.getPages();
                if(page.length>1){

                      myNavigator.popPage();

                }

            }else{


            } 



        });

        $(document).on("touchend",".container",function(){

         });

        function position(e){
            var x = e.originalEvent.touches[0].pageX;
            var y = e.originalEvent.touches[0].pageY;
            x = Math.floor(x);
            y = Math.floor(y);
            var pos = {'x':x , 'y':y};
            return pos;
        }




    </script>
</head>
<body>

    <ons-tabbar var="tabbar">
        <ons-tabbar-item
            icon="gear"
            label="page1"
            page="navigator.html"
            active="true"></ons-tabbar-item>
        <ons-tabbar-item
            icon="gear"
            label="page2"
            page="page2.html"></ons-tabbar-item>
        <ons-tabbar-item
            icon="gear"
            label="page3"
            page="page3.html"></ons-tabbar-item>
        <ons-tabbar-item
            icon="gear"
            label="Settings"
            page="page4.html"></ons-tabbar-item>
    </ons-tabbar>

</body>
</html>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。