0
我做了一個主選項卡(tab1.html),你有一個菜單來更改選項或轉到設置...現在我希望你可以點擊主tab(tab1.html)來到另一個oner(tab4.html)。問題是它不能同時工作,所以一個菜單(分離器)和一個pushpage函數; /如何解決它?對於菜單的分配器:溫泉UI 2.0分流器和pushPage不能一起工作
<ons-splitter>
<ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item onclick="fn.load('tab1.html')" tappable>
<ons-icon icon="home" style="color: #1e88e5;"></ons-icon><p style="opacity: 0.6;"> Startseite</p>
</ons-list-item>
<ons-list-item onclick="fn.load('tab6.html')" tappable>
<ons-icon icon="user" style="color: #1e88e5;"></ons-icon><p style="opacity: 0.6;"> Mein Profil</p>
</ons-list-item>
<ons-list-item onclick="fn.load('tab8.html')" tappable>
<ons-icon icon="sliders" style="color: #1e88e5;"></ons-icon><p style="opacity: 0.6;"> Einstellungen</p>
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="tab1.html"></ons-splitter-content>
</ons-splitter>
和導航,你應該來第4頁:
<ons-navigator id="pushpage_navigator" page="tab1.html"></ons-navigator>
然後tab1.html:
<ons-template id="tab1.html">
<ons-page>
<div class="left"> <!--left-->
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<button onclick="change()" />
</ons-page>
而且tab4.html,你應該來自tab1.html:
<ons-template id="tab4.html">
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Uhrzeitenansicht</div>
</ons-toolbar>
</ons-page>
</ons-template>
而最終javscript:
//ONSEN UI 2.0
window.fn = {};
window.fn.open = function() {
var menu = document.getElementById('menu');
menu.open();
};
window.fn.load = function(page) {
var content = document.getElementById('content');
var menu = document.getElementById('menu');
content.load(page)
.then(menu.close.bind(menu));
};
function change()
{
var myNavigator = document.getElementById('pushpage_navigator');
myNavigator.pushPage('tab4.html');
}
如果在分離器之前設置'ons-navigator'-tag,分離器不起作用。如果你在它後面設置,你會得到如下錯誤:myNavigator爲null或pushPage已經在運行。
是的,它的工作原理,但從tab1切換到tab4之間沒有動畫和backkey不出現? : –
我添加了一個演示鏈接。我在那裏看到一個動畫和一個後退按鈕。使用pushPage從tab1切換到tab4應該有一個動畫 - 也許你不小心打電話給fn.load?如果你想要,你可以修改和演示這個演示,這樣我就能明白你爲什麼會得到不同的結果:) –
我剛剛在你的codepen中粘貼了我的整個HTML,並且它不顯示動畫和backkey。 https://codepen.io/anon/pen/pEREKK?&editors=101當你點擊右下角的問題工廠時,你的函數'change()'將開始。請嘗試修復它;)PS:一些文件沒有加載,因爲缺少的JavaScript,但那不是重要的失敗必須在我的HTML –