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])切换页面。我使用您提供的模板创建了一个工作示例，并在<ons-button>模板中添加了list.html，用于更改活动页面。有关tabbar元素的更多信息，请查看here。如果您需要更多帮助，请告诉我们。）

＆＃13;

<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>

＆＃13;

添加tabbar后，Onsen UI导航无法正常工作

1 个答案: