Как я используюизстраница? - PullRequest
Новая
       22

Как я используюизстраница?

0 голосов
/ 12 мая 2019

При нажатии «Добавить страницу» после нажатия кнопки «Добавить значок» происходит переход на «вкладку 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();
}

1 Ответ

0 голосов
/ 23 июля 2019

попробуйте использовать <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>

Ссылка: Официальная игровая площадка: объединение навигатора и табуляции

...