前提・実現したいこと
HTMLでページの遷移が可能なウェブページを作っています。
またOnsenUIを用いてons-navigatorで遷移した後のページにons-tabbarでタブをつけたいと考えています。
発生している問題・エラーメッセージ
ons-navigatorで遷移はできたのですが、タブが大量発生してしまいます。
該当のソースコード
HTML5
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> 5 <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css"> 6 <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script> 7 <meta charset="UTF-8"> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 10 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 11 <title>Document</title> 12</head> 13 14<body> 15 16 17 <ons-navigator swipeable id="myNavigator" page="index.html"></ons-navigator> 18 19 <template id="index.html"> 20 <ons-page id="index"> 21 <p>This is the first page.</p> 22 <ons-button id="push-button">Push page</ons-button> 23 </ons-page> 24 </template> 25 26 27 <template id="tab1.html"> 28 <ons-page id="tab1"> 29 30 <ons-toolbar> 31 <div class="left"><ons-back-button>Page 1</ons-back-button></div> 32 <div class="center">page 2</div> 33 </ons-toolbar> 34 35 <p>This is the second page.</p> 36 <ons-tabbar swipeable position="bottom"> 37 <ons-tab page="tab1.html" label="Tab 1" icon="ion-home, material:md-home" badge="1" active> 38 </ons-tab> 39 <ons-tab page="tab2.html" label="Tab 2" icon="md-settings" active-icon="md-face"> 40 </ons-tab> 41 </ons-tabbar> 42 </ons-page> 43 </template> 44 45 46 <template id="tab2.html"> 47 <ons-page id="Tab2"> 48 <ons-toolbar> 49 <div class="center">page 3</div> 50 </ons-toolbar> 51 <p>This is the third page.</p> 52 </ons-page> 53 </template> 54</body> 55 56<script> 57 document.addEventListener('prechange', function(event) { 58 document.querySelector('ons-toolbar .center') 59 .innerHTML = event.tabItem.getAttribute('label'); 60 }); 61 62 63 document.addEventListener('init', function(event) { 64 var page = event.target; 65 66 if (page.id === 'index') { 67 page.querySelector('#push-button').onclick = function() { 68 document.querySelector('#myNavigator').pushPage('tab1.html', {data: {title: 'tab1'}}); 69 }; 70 } else if (page.id === 'tab1') { 71 page.querySelector('ons-toolbar .center').innerHTML = page.data.title; 72 } 73 }); 74 75</script> 76<script> 77 document.addEventListener('prechange', function(event) { 78 document.querySelector('ons-toolbar .center') 79 .innerHTML = event.tabItem.getAttribute('label'); 80 }); 81</script> 82</html> 83
試したこと
tab1.htmlの本文とtabberの部分を分けて書いた場合index.htmlに飛べなくなりました。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/26 18:53