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

Question

我对 angularJs 和 Ionic 有点陌生。我已经按照 ionic 网站的 css 文档实现了条纹标签。

我希望当我点击一个标签时，标题不会随其内容一起滑动（重新加载）。

基本上我需要做一些与 ionic 的 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

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

ionic 团队已经建立了一个很好的模板，如果你开始的话。你可以通过运行ionic start <Your app name> tabs来使用它

但是，如果您将其集成到现有应用程序中，请查看他们的模板 here

还有demo

HTH

Answer 2

您必须更改路线，以便孩子可以访问父母。这里的选项卡是父级（好友列表）的子级。 好友列表应该出现在其他路线之前。 将您的路线更改为：

.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，而不是为每个选项卡使用不同的控制器。