技術

【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

[Rails]if文とcontent_for

こんばんは content_for便利ですよね。 今回はcontent_forと …

no image

wordpressで固定ページが表示されない時は.htaccessを確認しよう

こんばんは 個人でwordpressサイトを持っているのですが いきなり固定ペー …

no image

【Angular6】画像を拡大したり、ドラッグ移動をできるようにする

こんにちは 画像を拡大したり、ドラッグ移動したい時は結構あるんじゃないでしょうか …

[正規表現]半角英数字&記号

どうも中田です。 今更ですが、正規表現の話。 正規表現でこんなパターンがほしい的 …

[Rails]rake db:seedに成功しているのにuserテーブルにデータが作成されない!

こんにちは。たなかです。 railsで開発してて、seedファイルがうまく流し込 …