I am developing it with monacaIDE+genymotion.
Based on the onsenUI tab bar, one particular tab would like to have a page transition different from tab switching in the left and right swipe.
<ons-gesture-detector> did not work well, so I tried to use jQuery to find the code to detect the swipe and combine it with the tab bar, but it did not work with <ons-navigator> for swipe transitions.
Please tell me how to combine swipe and tab bar.
Thank you for your cooperation.
<!DOCTYPE HTML>
<html>
<head>
<metacharset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scale=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(){
varbox=$("#touchBox")[0];
box.addEventListener("touchstart", touchHandler, false);
box.addEventListener("touchmove", touchHandler, false);
box.addEventListener("touchhand", touchHandler, false);
});
varxPos = 0;
varcurrentPos = 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");
// I want to move the page
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>--->
<!--- Swipe part-->
<divid="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 Add
When I changed the code to the one below, it was self-resolved.
4/6 Additional
I transferred the code to the answer field.
I solved myself using the code below.
The changes are broadly divided into
·Use the $(document).on function to determine the swipe addEventListener
·New version of jQuery
·Change monaca.pushPage to myNavigator.pushPage in the screen transition process
·Tabbar uses the onsenUI template as it is
That's the point.
Swipe detected for div named container
<!DOCTYPE HTML>
<html>
<head>
<metacharset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scale=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){
// Move to the left
myNavigator.pushPage('new_page.html');
} else if($( document).data("memory")-pos.x<-30){
// Move to the right
varpage=myNavigator.getPages();
if(page.length>1){
myNavigator.popPage();
}
} else {
}
});
$(document).on("touchend", ".container", function(){
});
function position(e){
varx=e.originalEvent.touches[0].pageX;
variable=e.originalEvent.touches[0].pageY;
x = Math.floor(x);
y = Math.floor(y);
varpos = {'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>
© 2024 OneMinuteCode. All rights reserved.