Question

我需要在离子框架中实现类似jQuery结构的东西

<body>
    <div data-role="page" id="page1">
        <!--content -->
    </div>
    <div data-role="page" id="page2">
        <!--content -->
    </div>
</body>

我在谷歌搜索但无法做到这一点。

目前我在我的html中有这个：

<body ng-app="todo" ng-controller="TodoCtrl">
<div id="page1">
    <header id="header" class="bar bar-header">

        <h3 class="title">header 1 is long</h3>
    </header>
    <content padding="true" id="">
    <div class="centered">
        <img alt="Flash Anatomy Muscles" src="images/thinkand.jpg"
            id="cover-img" />

    </div>
    </content>

    <div class="bar bar-footer">
        <div class="title">
            <button id="a" class="button button-light"
                ng-click="showAlert($event)">Origin</button>
            <button id="b" class="button button-light"
                ng-click="showAlert($event)">Insertion</button>
            <button id="c" class="button button-light"
                ng-click="showAlert($event)">Btn3</button>
            <button id="d" class="button button-light"
                ng-click="showAlert($event)">Btn4</button>
        </div>
    </div>
</div>
<div id="page2">
    <header id="header" class="bar bar-header">

        <h3 class="title">header 2</h3>
    </header>

    <content padding="true" id="">
    <div class="centered">
        random text over here
    </div>
    </content>

    <div class="bar bar-footer">
        <div class="title">

            <button id="e" class="button button-light"
                ng-click="showAlert($event)">Btn5</button>
            <button id="f" class="button button-light"
                ng-click="showAlert($event)">Btnn6</button>
        </div>
    </div>
</div>

</body>

它给了我这个结果：

enter image description here

观察这些：

两个页面＆＃39;标题重叠。
正在显示第1页（图像）的内容，并且正在将第二页的文字放在图像上。
第1页的页脚与第2页的页脚重叠。因此只显示第2页的按钮。

有人可以指导我在离子框架中需要做什么，例如jquery的data-role属性吗？

P.S：我尝试在div中添加data-role='page'。这根本不会改变结果。

Answer 1

Ionic根本不使用jQuery的任何内容，它使用Angular JS，我建议您阅读this post。

关于单页结构，我担心使用Ionic是不可能的，因为Ionic实现ui-router，它为不同的模板创建路由（每个模板都是不同的HTML）。

所以，只要摆脱jQuery并开始考虑帖子建议Angular，你就不会后悔！ ;）

用单个html写多个页面

1 个答案: