Question

点击“添加图标”后触发“推送页面”将跳至“标签1-2.html”

“ tab1-2.html”将被加载到“ tab1.html”中

如何更改为

让“ tab1-2.html”覆盖在整个页面上

这是我在CodePen中的所有代码 https://codepen.io/anon/pen/VOjyry

对不起，我的英语不太好

我试图改变

<ons-navigator swipeable id="myNavigator" page="tab1.html">

位置但是没有成功

<template id="tab1.html">
            <ons-navigator swipeable id="myNavigator" page="tab1.html">
                <ons-page id="tab1">

                    <p style="text-align: center; margin-top: 15px">
                        <ons-search-input style="width:95%" placeholder="Search"></ons-search-input>
                    </p>

                    <ons-list style="background-color:#eceff1;border: 0px">



                        <ons-fab position="bottom right" id="push-button">
                            <ons-icon icon="md-plus"></ons-icon>
                        </ons-fab>
                </ons-page>
            </ons-navigator>
        </template>

document.addEventListener('show', function(event) {
    var page = event.target;

    console.log("init");

    if (page.id === 'tab1') {
        page.querySelector('#push-button').onclick = function() {
            console.log(page.id);
            document.querySelector('#myNavigator').pushPage('tab1-2.html');
        };
    }
    //tabbar.setTabbarVisibility(false);

});

function closeImage() {
    /*database.transaction(function(tx) {
        database.executeSql('DROP TABLE LOGS');
    });*/
    document.querySelector('ons-navigator').popPage();
}

Answer 1

尝试使用<ons-navigatore>包装到<ons-tabbar>

<ons-navigator id="myNavigator">
  <ons-page>
    <ons-toolbar>
      <div class="center">Navigator+Tabbar</div>
    </ons-toolbar>
    <ons-tabbar position="auto">
      <ons-tab page="home.html" active icon="ion-home" label="Home"></ons-tab>
      <ons-tab icon="ion-card" label="Cards" badge="3" page="cards.html"></ons-tab>
      <ons-tab icon="ion-ios-cog" label="Settings" page="settings.html"></ons-tab>
    </ons-tabbar>
  </ons-page>
</ons-navigator>

参考： Official Playground: Combining Navigator and Tabbar

如何从<ons-tabbar>页面使用<ons-navigator>？

1 个答案: