技術

【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

【ionic 1.2】Native Scrolling

どうも中田です。 2015/12/10にionicの1.2が出ました! http …

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

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

[ Ionic ]Cannot find module ‘../node_modules/xml2js’ でVRプラグインを消せない!

こんにちは。たなかです。 Ionicでandroidをbuild中、下記のような …

コマンド一つで「20190729」みたいなスラッシュなしの日付を入力したい!

こんにちは。たなかです。 Macで「きょう」と入力すると、今日の日付が予測変換さ …

no image

【Rails】productionモードでCSSの画像が表示されない

どうも中田です。 css内で画像を設定して、productionモードで動かすと …