Question

我对angularJs和Ionic有点新鲜。我已经按照离子网站的css文档实现了条带标签。

Striped tabs

我想点击一个标题，标题不会随其内容滑动（重新加载）。

Basicaly我需要做一些类似于离子的{javascript文档here。

这是我的搜索页面：

<ion-view title="Friendlist">
<div class="tabs-striped tabs-top tabs-background-stable tabs-color-calm">
    <div class="tabs tabs-icon-left">
        <a class="tab-item" href="#">
            <i class="icon ion-person"></i>
            Followers
        </a>
        <a class="tab-item" href="#">
            <i class="icon ion-star"></i>
            Following
        </a>
        <a class="tab-item active" ui-sref="search">
            <i class="icon ion-search"></i>
            Search
        </a>
    </div>
</div>
<ion-content class="has-tabs-top" ng-controller="UserController">

    <div class="list list-inset">
        <label class="item item-input">
            <i class="icon ion-search placeholder-icon"></i>
            <input type="text" placeholder="Search">
        </label>
    </div>

    <div class="list">
        <div ng-repeat="user in users.user">
            <a class="item item-avatar" ui-sref="user({id:user.id})">
                <!-- <img ng-src=""> -->
                <h2>{{ user.firstname }} {{ user.lastname }}</h2>
            </a>
        </div>
    </div>

</ion-content>
</ion-view>

我使用3条不同的路线链接到3个不同的模板，可能还有3个不同的控制器。

.state('followers', {
    url: '/followers',
    templateUrl: 'templates/followers.html'
 }) 
 .state('following', {
    url: '/following',
    templateUrl: 'templates/following.html'
 }) 
 .state('search', {
    url: '/search',
    templateUrl: 'templates/search.html'
 })

我不确定以正确的方式做到这一点。我不介意加载标签的部分是不是即时的，但至少我希望我的条纹标签页保持静态，就像页面没有重新加载或访问新页面一样。

Answer 1

您必须更改路线，以便孩子访问父路线。这里的标签是Parent（friendlist）的子标签。朋友列表应该出现在其他路线之前。改变您的路线：

.state('friendlist', {
    url: '/friendlist',
    templateUrl: 'templates/friendlist.html',
    controller:'FriendlistCtrl'
 }) 
.state('friendlist.followers', {
    url: '/followers',
    templateUrl: 'templates/followers.html'
 }) 
 .state('friendlist.following', {
    url: '/following',
    templateUrl: 'templates/following.html'
 }) 
 .state('friendlist.search', {
    url: '/search',
    templateUrl: 'templates/search.html'
 })

现在尝试使用FriendlistCtrl作为选项卡，而不是为每个选项卡使用不同的不同控制器。

Answer 2

如果您想这样做，则必须使用<ion-tabs>指令

如果您开始使用，

ionic团队已经构建了一个很好的模板。您可以通过运行ionic start <Your app name> tabs

来使用它

但如果您要将其整合到现有应用中，请查看其模板here

和demo

HTH

离子条纹标签页，不应在点击时滑动到内容

2 个答案: