如何在离子科尔多瓦创建标签内容?
问题描述:
目前,我有这些代码为离子选项卡内容。我想要实现的是创建(2)选项卡。我设法创建了这两个选项卡,但是这些代码似乎不起作用。我不知道为什么每当我点击“标签2内容(标签)”时,标签是在“标签1内容”(默认情况下),它会导致我到另一个页面(HomePage.html),而不是显示预期的内容这是在同一页),反之亦然。我可以想到的一个可能的原因是,如果我的Sidemenu.html被宣布是这样的话,那么会有任何崩溃。 (虽然我说没有明显的是Sidemenu.html和TabContent.html之间崩溃)如何在离子科尔多瓦创建标签内容?
TabContent.html
<ion-view view-title="Tabs">
<ion-pane>
<ion-tabs class="tabs-top">
<!-- Tab 1 -->
<ion-tab title="Tab 1" href="#/tab/tab1">
<ion-nav-view name="tab-tab1">
<ion-content>
Tab 1 content
</ion-content>
</ion-nav-view>
</ion-tab>
<!-- Tab 2 -->
<ion-tab title="Tab 1" href="#/tab/tab2">
<ion-nav-view name="tab-tab2">
<ion-content>
Tab 2 content
</ion-content>
</ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-pane>
</ion-view>
SideMenu.html
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ng-click="login()">
Login
</ion-item>
<ion-item menu-close href="#/app/search">
QR Code
</ion-item>
<ion-item menu-close href="#/app/browse">
User Profile
</ion-item>
<ion-item menu-close href="#/app/playlists">
Setting
</ion-item>
<ion-item menu-close href="#/app/playlists">
E-Receipt
</ion-item>
<ion-item menu-close href="#/app/BitCoin" ng-click="clickerBit(item);" ng-mouseenter="searching();">
BitCoin
</ion-item>
<ion-item menu-close href="#/app/Membership">
membership
</ion-item>
<ion-item menu-close href="#/app/Redeemption" ng-click="clicker(item);">
redeemption
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
HomePage.html
<ion-view view-title="Home">
<ion-content>
<h2>Welcome, " "</h2>
<img class="homeImg" src="../img/qr.png" width="100" height="100" >
<br />
<img class="homeImg" src="../img/profile.png" width="100" height="100">
<br />
<img class="homeImg" src="../img/ereceipt.png" width="120" height="120">
<br />
<img class="homeImg" src="../img/settings.png" width="100" height="100">
<input id="target" type="button" value="Insert Data" onclick="AddValueToDB()" />
<script src="//code.jquery.com/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/BitCoin.js"></script>
</ion-content>
</ion-view>
答
<ion-tab title="Tab 1" href="#/tab/tab2">
hr财产是什么造成了你的烦恼。如果你点击选项卡,你的应用程序将尝试去'#/ tab/tab2',因为我猜你没有任何状态的URL,ui路由器将你重定向到默认的url,它必须是你的主页。
因此,也许删除href属性或创建一个#/ tab/tab2和您的内容的html(这是一个很好的折衷)的状态。
对不起,我可以知道我该如何创建一个状态? – qcc
您必须使用$ stateProvider请参阅http://ionicframework.com/docs/api/directive/ionNavView/并且这是因为离子使用ui-router https://www.google.fr/webhp?sourceid=chrome-即时&离子= 1&espv = 2&即= UTF-8#q = UI%20router%20tutorial – Gatsbill