0

お世話になっております。

機能としては、
・コンテンツをスクロール表示
・画面下部にタブバーを配置し、「前のページ」「次のページ」等でコンテンツ内容を切り替える
このようなアプリなのですが、
タブバーが固定されずコンテンツのスクロールに付いてきてしまいます。

解決法、対処法等ご教授願います。

※該当箇所(ページ)のみの最小限のコードにしてあります。
 タブバー部分の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>
6
  • toolbarとtabbarを囲んでいる<ons-page>を取り除いてみてください。
    – cither
    Commented 2016年3月30日 9:52
  • citherさん、回答ありがとうございます。 <ons-page></ons-oage> を取り除いてみましたが症状としては変化なしでした。
    – ggj_tanaka
    Commented 2016年3月30日 10:22
  • 1
    コードをよく見ないでコメントしてしまいましたが、<ons-tabbar>の基本的な使い方を踏まえていらっしゃらないようです。Monacaのプロジェクトテンプレートに「Onsen UI Tabbar」というのがありますので、まずはそこから始めてみてはいかがでしょうか。
    – cither
    Commented 2016年3月30日 10:38
  • citherさん、回答ありがとうございます。「Onsen UI Tabbar」は既に自分のプロジェクト一覧にあります。page2.htmlに<ons-list>、<ons-list-item>タグを追加したりして、「この書き方なら固定されるんだ…」ということはわかっています。が、このプロジェクトを見たりいじったりしていても、「基本的な使い方」は正直わかりません。ja.onsen.io/guide/overview.html#UsingTabBarこちらのページも何度見たかわかりませんが、プロジェクトに出てくる「<ons-tabbar-item>」について記載がなかったり…何が正しくて何が悪いのか判断がつきません。。。そもそも私があまり向いていないという話もありますが…ご気分を害されたら申し訳ありません。ただ、にっちもさっちもいかない人間もいるのだということでご容赦ください。
    – ggj_tanaka
    Commented 2016年3月30日 12:05
  • <ons-tab><ons-tabbar-item>は同じものです。昔は<ons-tabbar-item>と呼んでいましたが、<ons-tab>という名前になりました。どちらでも動作します。
    – cither
    Commented 2016年3月30日 12:12

1 件の回答 1

1

各コンテンツは別ファイルかテンプレートとして分けた方がよいと思います。

<ons-page>
    <ons-toolbar>
        <div class="left">左</div><div class="center"></div><div class="right">右</div>
    </ons-toolbar>

    <ons-tabbar>
        <ons-tab page="top.html" active="true" label="トップ" ocClick="トップへ遷移"></ons-tab>
        <ons-tab label="前のページ" ocClick="前のコンテンツへ遷移(1)"></ons-tab>
        <ons-tab label="次のページ" ocClick="次のコンテンツへ遷移(3)"></ons-tab>
    </ons-tabbar>

    <ons-template id="top.html">
        <!-- コンテンツ部分 ここから -->
        <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-template>
</ons-page>
1
  • user13314さん。回答ありがとうございます。なるほど、<ons-tab></ons-tab>を使うには根本的に画面設計がそぐわないということですね。今回は諸事情により画面設計からは変更できない状況なので、<ons-tab></ons-tab>の使用をやめ、<a></a>タグ等とスタイルで対応することにしました。下記のサイトのコードをほぼそのまま使わせていただきました。weboook.blog22.fc2.com/blog-entry-412.html ありがとうございました。
    – ggj_tanaka
    Commented 2016年4月1日 5:42

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。