Onsen-UI Swipe Navigation [closed] - onsen-ui

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I'm trying to figure out how to implement the "android" feel on Onsen-UI by using the 'swipe' navigation.
I tried implementing idangerous swiper, but not having much luck. My idea is to combine:
http://codepen.io/negibouze/pen/jEvOYz
enter code here
http://codepen.io/negibouze/pen/wBLeyp
enter code here
When you swipe, the tabs change but has that swipe animation/effect. I also would love it if each tab/swipe was a different html and not one index file.
Any ideas or help?

Answer 1

Great question. There are two different approaches:
As it's done in your second example, using tabbar and gesture detector. Onsen 2.0 has a slide animation for tabbar, so you just need to add <ons-tabbar animation="slide" ... >. Onsen 2.0 is still in alpha version but it will be released in the upcoming weeks. The drawback of this approach is that the slide animation starts after the swipe action is completed.
You basically add your ons-tabbar element and then configure the gesture detector as follows:
ons.ready(function() {
// Create a GestureDetector instance over your tabbar
// The argument is the actual HTMLElement of tabbar, you can also do document.getElementById(...)
var gd = ons.GestureDetector(myTabbar._element[0]);
gd.on('swipe', function(event) {
var index = myTabbar.getActiveTabIndex();
if (event.gesture.direction === 'left') {
if (index < 3) {
myTabbar.setActiveTab(++index);
}
} else if (event.gesture.direction === 'right') {
if (index > 0) {
myTabbar.setActiveTab(--index);
}
}
})
});
Working here: https://jsfiddle.net/frankdiox/o25novtu/1/
Combining ons-tabbar and ons-carousel elements. The drawback of this approach is that ons-carousel-item cannot get a template or separated file (check the comments to find another workaround to this).
ons-tab requires a page attribute and you cannot leave it blank without errors in the console, but we can use ons-tabbar's style instead of the actual component: http://onsen.io/reference/css.html#tab-bar
We combine it now with a fullscreen carousel like the one you mentioned and add the next CSS to make the page content respect our tabbar so it does not fall over or behind it:
ons-carousel[fullscreen] {
bottom: 44px;
}
Next step, we link every tab with its corresponding carousel item:
<div class="tab-bar" id="myTabbar">
<label class="tab-bar__item" onclick="carousel.setActiveCarouselItemIndex(0)">
...
</label>
<label class="tab-bar__item" onclick="carousel.setActiveCarouselItemIndex(1)">
...
</label>
<label class="tab-bar__item" onclick="carousel.setActiveCarouselItemIndex(2)">
...
</div>
And so on. This will make that when we click on a tab the carousel changes automatically. Now we need to do the opposite connection: update the checked tab when we swipe the carousel. The tabbar is basically a set of radio buttons, so we just need to get the one we want in the carousel's postchange event and check it:
ons.ready(function(){
carousel.on('postchange', function(event){
document.getElementById('myTabbar').children[event.activeIndex].children[0].checked = true;
});
});
You can now change the content of every carousel-item-index and insert an ons-page with anything you want.
Working here: http://codepen.io/frankdiox/pen/EVpNVg
We may add a feature to make this easier in upcoming versions of OnsenUI.
Hope it helps!