添加tabbar后温泉用户界面导航无法正常工作

我无法使用导航工具来使用选项卡栏。我有一个列表页面，搜索页面和详细信息页面。出于某种原因，我无法让列表页面在导航时保持不变。详细信息页面从未显示，即使我认为我正在使用app.navi.pushPage('detail.html')。在添加标签栏之前，一切正常。关于我做错什么的想法？添加tabbar后温泉用户界面导航无法正常工作

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

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

来源

2015-03-08 MoreScratch

您不能将<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>

来源

2015-03-09 04:18:43

非常感谢安迪！但是，由于我需要从给定选项卡导航到子页面的层次结构，因此我的问题依然存在。例如，从列表页面中，用户可以导航到详细信息页面。有没有简单导航到页面的方法？ – MoreScratch 2015-03-15 03:07:00

抱歉应该更完整地阅读文档。我正在使用loadPage，一切都按预期工作。 – MoreScratch 2015-03-15 03:17:24

添加tabbar后温泉用户界面导航无法正常工作

回答

相关问题