Пользовательский интерфейс Onsen - changePage с панелью инструментов сохранения, вкладкой и предварительной загрузкой текста ajax - PullRequest
Новая
       25

Пользовательский интерфейс Onsen - changePage с панелью инструментов сохранения, вкладкой и предварительной загрузкой текста ajax

0 голосов
/ 20 сентября 2019

Я просто хочу создать приложение на основе пользовательского интерфейса Cordova + onsen, но у меня небольшая проблема.На первом экране я выбираю язык пользователя и «старт» при старте прессы. Я отправляю uuid и lang в свою базу данных для будущего распознавания языка пользователя.После нажатия кнопки «Пуск» я хочу переместить пользователя на страницу с именем «Панель управления».Я использую: myNavigator.replacePage('dashboard.html'); Это работает, но моя панель инструментов и панель вкладок теряются.Есть ли возможность изменить страницу без потери панели вкладок и панели инструментов?

У меня есть панель вкладок и панель инструментов в другом шаблоне navigation.html это выглядит так: 

<ons-page>
    <span id="uuid" style="display: none;"></span>
    <span id="deviceLang" style="display: none;"></span>
    <ons-toolbar>
        <div class="left">
            <ons-toolbar-button>
                <ons-icon icon="md-menu"></ons-icon>
            </ons-toolbar-button>
        </div>
        <div class="center" style="color: #fff;">
            MY APP
        </div>
        <div class="right">
            <ons-toolbar-button>
                <ons-icon icon="md-menu"></ons-icon>
            </ons-toolbar-button>
        </div>
    </ons-toolbar>

    <ons-tabbar position="auto">
        <ons-tab icon="fa-user" label="AA" page="home.html" active></ons-tab>
        <ons-tab icon="fa-home" label="BB" page="dashboard.html"></ons-tab>
        <ons-tab icon="ion-ios-cog" label="CC" page="settings.html"></ons-tab>
    </ons-tabbar>
</ons-page>

--- панель инструментов.html 

<ons-page>
    <ons-row>
        <ons-col width="50%">
            <p>MYCONTENT</p>
        </ons-col>
        <ons-col width="50%">
            <p>MYCONTENT</p>
        </ons-col>
    </ons-row>
</ons-page>

- index.html body 

<ons-navigator id="myNavigator" page="navigation.html"></ons-navigator>
        <template id="home.html">
            <ons-page>
                <ons-row>
                    <ons-col>
                        <div style="text-align: center;">
                            <h1>MY APP</h1>
                            <ons-select class="select">
                                <select class="custom-select" id="languages">
HERE IS SELECT
                                </select>
                            </ons-select>
                            <br/><br/><br/>
                            <ons-button id="saveLanguage">
                                NEXT
                            </ons-button>
                        </div>
                    </ons-col>
                </ons-row>
            </ons-page>
        </template>

Второй вопрос - я хочу получить переведенный текст для страницы dashboard.html после нажатия кнопки «Далее» на главной странице.Когда мне следует поместить переведенные данные (загруженные ajax), чтобы отобразить переведенный текст на dashboard.html (наготове)?

1 Ответ

0 голосов
/ 20 сентября 2019

Конечно, будет.Вы объединяете навигатор и панель вкладок вместе.Если вы хотите, чтобы оно сохранялось, у вас должен быть навигатор на странице home.html, а затем использовать его.Я бы переосмыслил ваш рабочий процесс.В частности, что вы хотите представить пользователю?Вот пример кодепа, который сочетает в себе эти два параметра с некоторыми параметрами:

https://codepen.io/munsterlander/pen/BQQNOL

<ons-navigator id="myNav" page="page1.html"></ons-navigator>

<ons-template id="page1.html">
<ons-tabbar animation="slide">
  <ons-tab label="Tab 1" page="tab1.html" active>
  </ons-tab>
  <ons-tab label="Tab 2" page="tab2.html">
  </ons-tab>
</ons-tabbar>
</ons-template>

<ons-template id="page2.html">
<ons-tabbar animation="slide">
  <ons-tab label="Tab 3" page="tab3.html" active>
  </ons-tab>
  <ons-tab label="Tab 4" page="tab4.html">
  </ons-tab>
</ons-tabbar>
</ons-template>

<ons-template id="tab1.html">
  <ons-page>
    <div align="center" style="padding:10px;">
    <ons-button onclick="fn.pushPage()">Push New Page</ons-button>
      <p>This is tab 1</p>
    </div>
  </ons-page>
</ons-template>

<ons-template id="tab2.html">
  <ons-page>
    <div align="center" style="padding:10px;">
    This is tab 2
    </div>
  </ons-page>
</ons-template>

<ons-template id="tab3.html">
  <ons-page>
    <div align="center" style="padding:10px;">
    <ons-button onclick="fn.popPage()">Pop Page</ons-button>
      <p>This is tab 3</p>
    </div>
  </ons-page>
</ons-template>

<ons-template id="tab4.html">
  <ons-page>
    <div align="center" style="padding:10px;">
    This is tab 4
    </div>
  </ons-page>
</ons-template>

Вот еще один вариант использования разделителя и вкладки, если вы не хотитеидти по навигатору по маршруту.

https://codepen.io/munsterlander/pen/gmoeXM

...