お世話になっております。
機能としては、
・コンテンツをスクロール表示
・画面下部にタブバーを配置し、「前のページ」「次のページ」等でコンテンツ内容を切り替える
このようなアプリなのですが、
タブバーが固定されずコンテンツのスクロールに付いてきてしまいます。
解決法、対処法等ご教授願います。
※該当箇所(ページ)のみの最小限のコードにしてあります。
タブバー部分のonClick関数には、
現在表示中のコンテンツの1つ前、1つ後のキーが動的に渡される仕組みになっています。
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script>
ons.bootstrap();
</script>
</head>
<body>
<ons-page>
<ons-toolbar>
<div class="left">左</div><div class="center"></div><div class="right">右</div>
</ons-toolbar>
<!-- コンテンツ部分 ここから -->
<div style="font-size:12pt;margin:10px;">コンテンツ2<br><br>1こんにちは。<br>ここに内容が書かれます。<br><br>2こんにちは。<br>ここに内容が書かれます。<br><br>3こんにちは。<br>ここに内容が書かれます。<br><br>4こんにちは。<br>ここに内容が書かれます。<br><br>5こんにちは。<br>ここに内容が書かれます。<br><br>6こんにちは。<br>ここに内容が書かれます。<br><br>7こんにちは。<br>ここに内容が書かれます。<br><br>8こんにちは。<br>ここに内容が書かれます。<br><br>9こんにちは。<br>ここに内容が書かれます。<br><br>10こんにちは。<br>ここに内容が書かれます。<br><br>11こんにちは。<br>いここに内容が書かれます。<br><br></div>
<!-- コンテンツ部分 ここまで -->
<ons-tabbar>
<ons-tab label="トップ" ocClick="トップへ遷移"></ons-tab>
<ons-tab label="前のページ" ocClick="前のコンテンツへ遷移(1)"></ons-tab>
<ons-tab label="次のページ" ocClick="次のコンテンツへ遷移(3)"></ons-tab>
</ons-tabbar>
</ons-page>
</body>
</html>
追記 2016/04/01
暫定対応できたので追記します。
user13314さんのコメントから、<ons-tabbar></ons-tabbar>
での実現が不可能と判断し
<a></a>
タグ等やスタイルを使った方法に変更することにしました。
下記のページをほぼそのまま使わせていただき、タブバー風に画面下部に固定することに成功しました。
http://weboook.blog22.fc2.com/blog-entry-412.html
変更点
・css/style.cssファイルに上記サイトのcss部分を追記。
・index.htmlの<ons-page></ons-page>
の部分を下記のように変更。(jQueryは使用せず。)
<ons-page>
<ons-toolbar>
<div class="left">左</div><div class="center"></div><div class="right">右</div>
</ons-toolbar>
<!-- コンテンツ部分 ここから -->
<div style="font-size:12pt;margin:10px;">コンテンツ2<br><br>1こんにちは。<br>ここに内容が書かれます。<br><br>2こんにちは。<br>ここに内容が書かれます。<br><br>3こんにちは。<br>ここに内容が書かれます。<br><br>4こんにちは。<br>ここに内容が書かれます。<br><br>5こんにちは。<br>ここに内容が書かれます。<br><br>6こんにちは。<br>ここに内容が書かれます。<br><br>7こんにちは。<br>ここに内容が書かれます。<br><br>8こんにちは。<br>ここに内容が書かれます。<br><br>9こんにちは。<br>ここに内容が書かれます。<br><br>10こんにちは。<br>ここに内容が書かれます。<br><br>11こんにちは。<br>いここに内容が書かれます。<br><br></div>
<!-- コンテンツ部分 ここまで -->
<nav id="menu-wrap">
<ul id="menu">
<li><a href="#" onClick="トップへ遷移">トップ</a></li>
<li><a href="#" onClick="前のコンテンツへ遷移(1)">前のページ</a></li>
<li><a href="#" onClick="次のコンテンツへ遷移(3)">次のページ</a></li>
</ul>
</nav>
</ons-page>
<ons-page>
を取り除いてみてください。<ons-page></ons-oage>
を取り除いてみましたが症状としては変化なしでした。<ons-tabbar>
の基本的な使い方を踏まえていらっしゃらないようです。Monacaのプロジェクトテンプレートに「Onsen UI Tabbar」というのがありますので、まずはそこから始めてみてはいかがでしょうか。<ons-tab>
と<ons-tabbar-item>
は同じものです。昔は<ons-tabbar-item>
と呼んでいましたが、<ons-tab>
という名前になりました。どちらでも動作します。