添加标签栏后 Onsen UI 导航无法正常工作

Question

我无法让导航与标签栏一起使用。我有一个列表页面、搜索页面和详细信息页面。出于某种原因，我无法让列表页面在导航时保持不变。即使我正在使用 app.navi.pushPage('detail.html')，也从未显示详细信息页面。在添加标签栏之前一切正常。对我做错了什么有什么想法吗？

另外，我需要从列表页面和搜索页面访问详细信息页面。

<ons-navigator page="list.html" var="app.navi"></ons-navigator>

<ons-tabbar>
    <ons-tab page="favourites.html" label="Favourites" icon="fa-heart"></ons-tab>
    <ons-tab page="list.html" label="Near Me" icon="fa-map-marker" active="true"></ons-tab>      
    <ons-tab page="search.html" label="Search" icon="fa-search"></ons-tab>
</ons-tabbar>

<ons-template id="list.html">
    <ons-page id="list-page">
        <ons-toolbar>
            <div class="center">Near Me</div>
        </ons-toolbar>            
        <ons-list id="lst-estblshmnt"></ons-list>
    </ons-page>
</ons-template>

<ons-template id="search.html">
    <ons-page id="search-page">
        <ons-toolbar>
            <div class="center">Search</div>
        </ons-toolbar>
        <ons-row>
            <ons-col>
                <input id="srch" type="search" class="search-input">
            </ons-col>
            <ons-col width="75px" style="display: none">
                <ons-button id="btn-cancel-search" modifier="quiet">Cancel</ons-button>
            </ons-col>
        </ons-row>            
        <ons-list id="lst-srch"></ons-list>
    </ons-page>
</ons-template>

<ons-template id="detail.html">
    <ons-page id="detail-page">
        <ons-toolbar>
            <div class="left"><ons-back-button>Back</ons-back-button></div>
            <div class="right">
                <ons-toolbar-button id="btn-fllw"><ons-icon icon="fa-heart-o"></ons-icon></ons-toolbar-button>
            </div>
        </ons-toolbar>
        <ons-row>
            <ons-col id="establishment-details">
                <header>
                    <center class="item-title">Title</center>
                </header>
                <div class="item-details">
                    <ons-row>
                        <ons-col>
                            <p class="item-address"></p>
                            <p class="item-city"></p>
                            <p class="item-postal_code"></p>
                        </ons-col>                           
                    </ons-row>
                </div>
            </ons-col>
        </ons-row> 
    </ons-list>          

    </ons-page>
</ons-template>

Answer 1

您不能将 <ons-navigator> 与 <ons-tabbar> 结合使用。如果你使用tabbar元素，你可以使用setActiveTab(index, [options])来切换页面。我使用您提供的模板创建了一个工作示例，并在 list.html 模板中添加了一个 <ons-button> 来更改活动页面。有关 tabbar 元素的更多信息，请查看 here。如果您需要更多帮助，请告诉我:)

<body>

    <ons-tabbar var="tabbar">
        <ons-tabbar-item
            icon="home"
            label="Home"
            page="list.html"
            active="true"></ons-tabbar-item>
        <ons-tabbar-item
            icon="comment"
            label="Comments"
            page="search.html"></ons-tabbar-item>
        <ons-tabbar-item
            icon="gear"
            label="Settings"
            page="detail.html"></ons-tabbar-item>
    </ons-tabbar>
    
    <ons-template id="list.html">
    <ons-page id="list-page">
        <ons-toolbar>
            <div class="center">Near Me</div>
        </ons-toolbar>            
        <ons-list id="lst-estblshmnt"></ons-list>
        <ons-button id="btn-switch-search"  ng-click="tabbar.setActiveTab(2)">Cancel</ons-button>
    </ons-page>
</ons-template>

<ons-template id="search.html">
    <ons-page id="search-page">
        <ons-toolbar>
            <div class="center">Search</div>
        </ons-toolbar>
        <ons-row>
            <ons-col>
                <input id="srch" type="search" class="search-input">
            </ons-col>
            <ons-col width="75px" style="display: none">
                <ons-button id="btn-cancel-search" modifier="quiet">Cancel</ons-button>
            </ons-col>
        </ons-row>            
        <ons-list id="lst-srch"></ons-list>
    </ons-page>
</ons-template>

<ons-template id="detail.html">
    <ons-page id="detail-page">
        <ons-toolbar>
            <div class="left"><ons-back-button>Back</ons-back-button></div>
            <div class="right">
                <ons-toolbar-button id="btn-fllw"><ons-icon icon="fa-heart-o"></ons-icon></ons-toolbar-button>
            </div>
        </ons-toolbar>
        <ons-row>
            <ons-col id="establishment-details">
                <header>
                    <center class="item-title">Title</center>
                </header>
                <div class="item-details">
                    <ons-row>
                        <ons-col>
                            <p class="item-address"></p>
                            <p class="item-city"></p>
                            <p class="item-postal_code"></p>
                        </ons-col>                           
                    </ons-row>
                </div>
            </ons-col>
        </ons-row> 
    </ons-list>          

    </ons-page>
</ons-template>

</body>

添加标签栏后 Onsen UI 导航无法正常工作

Onsen UI navigation not working after adding tabbar

onsen-ui