技術

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

関連記事

[Xcode] iOSソフトウェアアップデート後に、Could not locate device support files.

こんにちは。たなかです。 Xcodeで開発中に以下のエラーにぶつかりました。 エ …

no image

【Angular】Delete methodにbodyデータを付与する

こんにちは 今回はAngularのDeleteメソッドでbodyデータを付与する …

no image

auto_incrementの値を確認して変更

こんにちは、コーテッグのこやまです。 railsとmysqlを使っていて、自動で …

プログラミンを触ってみた

2020年から小学校でのプログラミング教育が必修になる(かも?)ということで、 …

Google PolyをFusion360でお試し

Googleさんが公開した無料の3Dデータライブラリ Poly AR・VRアプリ …