

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

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

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

[code]

    <!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>
    
[/code]

4/5追記

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

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


CC BY-SA 3.0
2016-04-04T06:51:37.133
23726
2016-10-13T13:01:11.747
2016-04-06T00:56:54.700
14966
14966
question
monaca onsen-ui
onsenUIにて、スワイプとタブバーでのページ遷移を組み合わせたいです。


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

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

というような点です。

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

[code]

    <!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>
    
[/code]


CC BY-SA 3.0
2016-04-06T00:54:59.097
23773
2016-04-06T01:02:24.780
2016-04-06T01:02:24.780
14966
14966
23726
answer