技術

【ionic】ナビゲーションバーがちらつく

投稿日:

どうも、中田です。

ionicでアプリを作っていて、なんかナビゲーションバーがちらつくってことないですか?

タップした瞬間、ナビゲーションバーが一瞬消えて、
次の画面に遷移するって動きです。

色々と手を加えている内にちらつくようになっちゃって、
なんでかなーって思ってたらこれでした。

<ion-view view-title="テスト画面">
	<ion-nav-bar>
		<ion-nav-back-button>
		</ion-nav-back-button>
	</ion-nav-bar>
	<ion-content>
	  ...(略)
	</ion-content>
</ion-view>

これは画面遷移後の画面なんですが、
ion-nav-barを再度やってるのが悪さしてました。
新しく作り直しちゃってるんですね。

それをこうやってやると、

<ion-view view-title="テスト画面">
	<ion-nav-back-button>
	</ion-nav-back-button>
	<ion-content>
	  ...(略)
	</ion-content>
</ion-view>

ちらつかずに画面遷移するようになりました。

感覚的にバックボタンを入れるならちゃんと外枠のion-nav-barも入れてやんないといけないと
思ったのがまずかった。

index.htmlに書いてるion-nav-barを使いまわすのが、スタンダードなやり方なのか〜。

ちなみにボタンを付け加えたい!と思ったら、
バックボタンと同じで素直にボタンのコードだけ追加で書けば画面ごとに追加されます。

こんな感じに。。

<ion-view view-title="テスト画面">
	<ion-nav-back-button>
	</ion-nav-back-button>

	<ion-nav-buttons side="left">
		<a class="button button-icon icon ion-ios-plus-empty" ng-click="new()"></a> 
	</ion-nav-buttons>

	<ion-content>
	  ...(略)
	</ion-content>
</ion-view>

なるほどね。

-技術
-

執筆者:


  1. […] 【ionic】ナビゲーションバーがちらつくの続編にもなります。 […]

comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

【AngularJS】 $on, $emit, $broadcast

どうも、なかたです。 AngularJSのコントローラー(スコープ)間のデータや …

no image

[wordpress]各固定ページに個別のCSSを読み込ませる

こんばんは wordpreddでオリジナルテーマを作成している時、各固定ページに …

no image

[Angular]リアクティブフォームのHTML側の記法

Angularのリアクティブフォームではtsファイル側でネストした構成を組むこと …

[Slack] スラッシュコマンドでamazon検索

Slackネタです。 amazonがSlackの買収を検討しているとかいないとか …

no image

gormでバルクインサート

こんにちは gormでレコードを作成する時は user := User{Name …