Hi, I am using the onsen UI kitchen sink application as the basis of my application.
I am having trouble with loading a page before the tabbar. What I want to achieve is when the app starts up, a loading page(splash screen) pops up instead with a loading wheel, after whatever logic, redirect the user to a sign in page or the home screen(the tab bar). So far I have only been able to load the start up page by adding a second navigator (I have tried other ways, this is the only way it worked). When I do this though, I face another issue which is I can’t navigate off that start up page even when I add a button to manually.
Most of my pages are in their own separate files but for the purpose of this I have moved the start up page to the same index file.
Please see the code below, as you can see I’ve commented out the second navigator, which if I uncomment works but can’t navigate off it. I have tried adding page="startup2.html"
to the appNavigator and that doesn’t work.
I have also tried the loadView and pushPage for the button none of which worked.
Thank you and apologies if this is basic but I have stuck on this for a couple of days.
Index
<!--Tabbar navigation-->
<ons-navigator id="appNavigator">
<ons-page>
<ons-splitter id="appSplitter">
<ons-splitter-side id="moremenu" page="moremenu.html" swipeable side="right" collapse="" width="260px"></ons-splitter-side>
<ons-splitter-content>
<ons-page>
<ons-toolbar>
<div class="center">FACT</div>
<div class="right">
<ons-toolbar-button onclick="fn.toggleMenu()">
<ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-tabbar id="appTabbar" position="auto">
<ons-tab label="Home" icon="ion-home" page="view/home.html" active></ons-tab>
<ons-tab label="Charts" icon="ion-arrow-graph-down-right" page="view/charts.html"></ons-tab>
<ons-tab label="Animations" icon="ion-film-marker" page="view/preview.html"></ons-tab>
<ons-tab label="More" icon="ion-more" onclick="fn.toggleMenu()"></ons-tab>
</ons-tabbar>
</ons-page>
</ons-splitter-content>
</ons-splitter>
</ons-page>
</ons-navigator>
<!--<ons-navigator id="myNavigator" page="startup2.html"></ons-navigator>-->
<template id="startup2.html">
<ons-page id="startup2">
<div style="text-align: center; margin: 40px; color: #666">
<p>
<ons-progress-circular class="progressStyle" indeterminate></ons-progress-circular>
</p>
<ons-list>
<ons-list-item onclick="fn.load('homepage.html')" tappable>
<div class="left">
<ons-icon fixed-width class="list-item__icon" icon="ion-home, material:md-home"></ons-icon>
</div>
<div class="center">
Home
</div>
<div class="right">
<ons-icon icon="fa-link"></ons-icon>
</div>
</ons-list-item>
</ons-list>
</div>
</ons-page>
</template>
Navigation
// Navigation for the application
window.fn = {};
window.fn.toggleMenu = function () {
document.getElementById('appSplitter').right.toggle();
};
window.fn.loadView = function (index) {
document.getElementById('appTabbar').setActiveTab(index);
document.getElementById('moremenu').close();
};
window.fn.loadLink = function (url) {
window.open(url, '_blank');
};
window.fn.pushPage = function (page, anim) {
if (anim) {
document.getElementById('appNavigator').pushPage(page.id, { data: { title: page.title }, animation: anim });
} else {
document.getElementById('appNavigator').pushPage(page.id, { data: { title: page.title } });
}
};
window.fn.load = function (page) {
// var menu = document.getElementById('menu');
var navi = document.getElementById('myNavigator');
// menu.close();
var currentPage = navi.getAttribute('page');
if (currentPage != page) {
navi.setAttribute('page', page);
navi.resetToPage(page, {
animation: 'fade'
});
}
};
ons.ready(function () {
const moremenu = document.getElementById('appSplitter');
ons.platform.isAndroid() ? moremenu.right.setAttribute('animation', 'overlay') : moremenu.right.setAttribute('animation', 'reveal');
})