技術

【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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

git_logo

[Git] どのコミットでバグが入ったか原因究明する方法【git blame】

こんにちは。さとうです。 今回はgitを使って、どのコミットでバグが入ったか原因 …

wgetコマンドで指定のサイトをダウンロードしてみる。

wgetコマンドって? 下記の形式のコマンドを叩くと、指定のURLからファイルを …

[Rails] エラー unable to convert unpermitted parameters to hash について

こんにちは。佐藤です。 今回はRailsのpermit!についての備忘録です。 …

[Xcode]Provisioning ProfileのUUIDを確認する方法

どうも田中です。 iOSアプリの審査に向けて作業している最中、buildエラーに …

[JS] イベントバブリングまとめ

どうも中田です いつも忘れちゃうんですよ。 javascriptのイベントバブリ …