时间戳

首页 > 解决方案 > Onsen UI - 带有保存工具栏、标签栏和预加载 ajax 文本的 changePage

jquery - Onsen UI - 带有保存工具栏、标签栏和预加载 ajax 文本的 changePage

问题描述

我只想创建一个基于 Cordova + onsen UI 的应用程序，但我有一个小问题。在第一个屏幕上，我选择了用户语言并在按下开始时“开始”我将 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 正文

<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（准备好）？

标签： jquerycordovaonsen-uionsen-ui2

解决方案

当然会的。您正在将导航器和标签栏组合在一起。如果您希望它持续存在，您应该在 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

推荐阅读