質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

1回答

525閲覧

【ons-tabbar】Onsen UI v1にある「loadPage」をv2で使う方法(代わるやり方)

akamiko

総合スコア0

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2020/07/04 06:31

編集2022/01/12 10:55

ons-tabbarについて、Onsen UI v1にある「loadPage」をv2で使う方法を探しています。

javaScript

1tab.setActiveTab(1)

は正常に動作することが確認できたのですが、タブに表示している以外のページにタブを残したまま移動する方法を探しています。
OnsenUI v1では

Onsen

1tab.loadPage("hogehoge.html") 2```でできていたようですがv2ではリファレンスから該当のファンクションが無くなっていました。 3 4タブは並列切り替え、ナビゲーターは階層切り替えと考えた場合、ナビゲーターの導入も考慮したのですが、実際 5 6ページA 7タブ 8 - タブ1 9 - タブ2 10 - タブ3 11 12とあったときに、タブ1に 13 リンクA → タブ2へ 14 リンクB → 別ページB 15 リンクC → 別ページC 16というリンクボタンがそれぞれ置かれていた場合に、別ページBと別ページCに行く方法を知りたいのです。 17このときタブは残したままにしたいです。 18 19どなたかご存じの方がいらっしゃいましたらご教授いただけますと幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

Onsen UI V1とV2では仕様が違いますので、ons-tabbarを使用せず、ons-navigatorresetToPage()を使用して切り替えれば、V1に近い動きになります。
また、一つの
ons-navigator
でタブバーの切り替えとページ遷移を行うことができます。

掲載したコードの注意点としては、
0. CSSコンポーネントを使用しているので、Androidの場合はタブバーをmaterialに切り替える。
0. page__contentクラスの高さは、タブバーの高さを引いた値を設定する。
0. スワイプによるタブの切り替えができない。

などがあります。

アプリ起動時に、ons-tabpage属性に設定したページを同時に読み込む必要がないので、この方法を採用しています。

HTML

1<ons-navigator id="mynavigator" page="page1.html"></ons-navigator> 2<div class="tabbar"> 3 <label class="tabbar__item"> 4 <input type="radio" name="tabbar-c" checked="checked"> 5 <button class="tabbar__button"> 6 <div class="tabbar__label">tab 1</div> 7 </button> 8 </label> 9 <label class="tabbar__item"> 10 <input type="radio" name="tabbar-c"> 11 <button class="tabbar__button"> 12 <div class="tabbar__label">tab 2</div> 13 </button> 14 </label> 15 <label class="tabbar__item"> 16 <input type="radio" name="tabbar-c"> 17 <button class="tabbar__button"> 18 <div class="tabbar__label">tab 3</div> 19 </button> 20 </label> 21</div> 22 23<template id="page1.html"> 24 <ons-page id="page1"> 25 <ons-toolbar> 26 <div class="center">page 1</div> 27 </ons-toolbar> 28 <p style="padding-top: 20px; text-align: center;"> 29 <ons-button onclick="document.querySelectorAll('.tabbar__item input')[1].click()">tab 2</ons-button> 30 </p> 31 <p style="padding-top: 20px; text-align: center;"> 32 <ons-button onclick="document.getElementById('mynavigator').pushPage('pageb.html', { animation: 'slide' })">page B</ons-button> 33 </p> 34 <p style="padding-top: 20px; text-align: center;"> 35 <ons-button onclick="document.getElementById('mynavigator').pushPage('pagec.html', { animation: 'slide' })">page C</ons-button> 36 </p> 37 </ons-page> 38</template> 39 40<template id="page2.html"> 41 <ons-page id="page2"> 42 <ons-toolbar> 43 <div class="center">page 2</div> 44 </ons-toolbar> 45 <p style="padding-top: 20px; text-align: center;"> 46 <ons-button onclick="document.getElementById('mynavigator').pushPage('pageb.html', { animation: 'slide' })">page B</ons-button> 47 </p> 48 <p style="padding-top: 20px; text-align: center;"> 49 <ons-button onclick="document.getElementById('mynavigator').pushPage('pagec.html', { animation: 'slide' })">page C</ons-button> 50 </p> 51 </ons-page> 52</template> 53 54<template id="page3.html"> 55 <ons-page id="page3"> 56 <ons-toolbar> 57 <div class="center">page 3</div> 58 </ons-toolbar> 59 </ons-page> 60</template> 61 62<template id="pageb.html"> 63 <ons-page id="pageb"> 64 <ons-toolbar> 65 <div class="left"> 66 <ons-back-button>戻る</ons-back-button> 67 </div> 68 <div class="center">page B</div> 69 </ons-toolbar> 70 <p style="padding-top: 20px; text-align: center;"> 71 <ons-button onclick="document.getElementById('mynavigator').pushPage('pagec.html', { animation: 'slide' })">page C</ons-button> 72 </p> 73 </ons-page> 74</template> 75 76<template id="pagec.html"> 77 <ons-page id="pagec"> 78 <ons-toolbar> 79 <div class="left"> 80 <ons-back-button>戻る</ons-back-button> 81 </div> 82 <div class="center">page C</div> 83 </ons-toolbar> 84 </ons-page> 85</template> 86

CSS

1.tabbar { 2 z-index: 2; 3}

JavaScript

1"use strict"; 2ons.ready(function () { 3 var tabbar = document.querySelectorAll(".tabbar__item input"); 4 tabbar[0].onclick = function () { 5 document.getElementById("mynavigator").resetToPage("page1.html", { animation: "slide" }); 6 }; 7 tabbar[1].onclick = function () { 8 document.getElementById("mynavigator").resetToPage("page2.html", { animation: "slide" }); 9 }; 10 tabbar[2].onclick = function () { 11 document.getElementById("mynavigator").resetToPage("page3.html", { animation: "slide" }); 12 }; 13});

投稿2020/07/04 15:21

otak-lab

総合スコア276

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問