Monaca Tabbar を使用して画面遷移をしてみよう Onsen UI＋Vue - 中年システムエンジニアのオモチャ箱

今回は、新規プロジェクトを作成するところから始めてください。
忘れてしまった方は、下記の記事を参考にしてみてくださいね。

www.ma-se.com

Tabbar 機能を使用して、画面遷移をしてみます。
新規プロジェクトの作成では、下記を選択・入力してください。

フレームワーク
「Vue」を選択します。
テンプレート
「Onsen UI V2 VUE Tabbar」を選択します。
プロジェクトの情報
プロジェクト名には「Onsen UI テスト02」を入力します。
説明は任意で構いません。

上記でプロジェクトを新規で作成すると、クラウド IDE には下記のように表示されたかと思います。

f:id:middle-aged-se:20190616143750j:plain

Tabbar 機能について

Tabbar 機能を使用することにより、各画面に遷移することができます。

f:id:middle-aged-se:20190616143748j:plain

タブの表示は今回の場合ですと［2］になります。
それぞれのアイコンをクリックすることにより、各画面に遷移します。

Home アイコン：Home 画面
News アイコン：News 画面
Settings アイコン：Settings 画面

また、サンプルで作成された動作では、選択したタブアイコン名称［2］を、タブクリックで連動し［1］ツールバーに表示しています。

現行動作の確認

作成したプロジェクトを動かして、現行の動作を確認してみましょう！

［1］の Settings アイコンをクリックすると、Settings 画面が表示されます。
［1］の News アイコンをクリックすると、News 画面が表示されます。
［1］の Home アイコンをクリックすると、Home 画面が表示されます。

タブのアイコン名を修正してみよう

タブには「Home、News、Settings」という 3 アイコンが存在していました。
各アイコンをクリックすることにより、対応した画面が表示されましたね。
今回、タブに英語表記されたものを、日本語表記に変更します。

修正対象は App.vue　ファイルになります。
タブのアイコンタイトルを「Home」から「ホーム画面」、「News」から「ニュース画面」、「Settings」から「設定画面」に変更します。
App.vue ファイルの 28 行目を変更します。

変更前ソース
label: 'Home',

変更後ソース
label: 'ホーム画面',

App.vue ファイルの 33 行目を変更します。

変更前ソース
label: 'News',

変更後ソース
label: 'ニュース画面',

App.vue ファイルの 39 行目を変更します。

変更前ソース
label: 'Settings',

変更後ソース
label: '設定画面',

各画面のコンテンツの表示文字列を変更してみよう

修正対象となるファイルは、src フォルダに存在する、「Home.vue」、「News.vue」、「Settings.vue」となります。
・Home.vue：Home 画面
・News.vue：News 画面
・Settings.vue：Settings 画面
Home 画面のコンテンツ内容を日本語表記に変更します。
変更箇所は、Home.vue ファイルの 4 ～ 6 行目を変更します。
変更前ソース


Welcome home.



変更後ソース


ホーム画面へようこそ
News 画面のコンテンツ内容を日本語表記に変更します。
変更箇所は、News.vue ファイルの 4 ～ 6 行目を変更します。

変更前ソース


Some news here.



変更後ソース


ニュースを記載します
Settings 画面のコンテンツ内容を日本語表記に変更します。
変更箇所は、Settings.vue ファイルの 4 ～ 6 行目を変更します。

変更前ソース


Change the settings.



変更後ソース


各種設定の変更を行います
タブのアイコン名と、ツールバーに表示する名称を連動している制御は下記となります。

App.vue ファイルの 3 ～ 5 行目で、ツールバーに表示する文字列を取得しています。
この場合は「title」プロパティです。

ツールバーに表示する処理
<v-ons-toolbar>

<div class="center">{{ title }}</div>

</v-ons-toolbar>

App.vue ファイルの 50 ～ 54 行目で、「title」プロパティに値を設定しています。
設定する値は、Tabbar の label プロパティから取得しています。

title プロパティに値を設定する処理
computed: {

title() {

return this.tabs[this.activeIndex].label;

}

},

上記の制御から、アイコンで表示されている名称と、ツールバーに表示する名称が連動されています。
タブの各アイコンをクリックすると、日本語表記された画面が表示されます。