SelfieGirlはionic frameworkを使っていると以前の投稿で書きましたが、なかなかノウハウがまとまっていないと思うのでこのブログにまとめていこうと思います。
ionicを使っていると、戻るボタンを簡単に表示することができます。
画面遷移したタイミングで自動的に左上に戻るボタンを表示してくれます。これはありがたい。
下記の例では、ボタンのタイプと戻るボタンを示すアイコンを指定しています。
（以下はテンプレートとなるタグ設定）
1 2 3 4 5 6 7 8 | <body ng-app="SelfieGirl"> <nav-bar animation="nav-title-slide-ios7" type="bar-calm" back-button-type="button-icon" back-button-icon="ion-arrow-left-c"> </nav-bar> <nav-view></nav-view></body> |
これはありがたいのですが、入り口が、トップページではないページになってしまった場合で、次のページとしてトップページを表示した場合、トップページにも関わらず戻るボタンが表示されてしまいます。これはダサい…。
これの解決法が、以下の通りになります。
viewにhide-back-buttonを設定しておくと、表示されません。
1 2 3 4 5 6 | <view title="title" hide-back-button="true"> <content has-header="true" padding="true" id="TopCtrl"> <p>ここに本文を記述します。</p> </content></view> |
トップページにはこの設定をしておくのがよいでしょう。
