質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

1回答

1261閲覧

MonacaでOnsen UIとAngularJSを利用しタブの切り替え時にタブ内のページ履歴をリセットしつつ、carouselを利用したい

noric

総合スコア12

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2019/06/05 09:33

前提・実現したいこと

MonacaでOnsen UIとAngularJSを利用してアプリ開発を行っております。
タブの切り替え時にタブ内のページ履歴をリセットしつつ、carouselを利用したいです。

発生している問題・エラーメッセージ

リセットする事には成功しているのですが、タブとカルーセルの切り替え時の発火条件であるprechangeが重複している為、カルーセルが動かなくなってしまいます。

該当のソースコード

JavaScript側 module.directive('noslidingmenu', function($timeout) { return { restrict: "A", scope: true, link: function($scope, element, attrs) { myTabbar.on("prechange", function (e) { if (myTabbar.getActiveTabIndex() == 0) { if (myNavigator1.pages.length > 1) { myNavigator1.popPage(); } }else if (myTabbar.getActiveTabIndex() == 1){ if (myNavigator.pages.length > 1) { myNavigator.popPage(); } } }); } }; }); HTML側タブ部分 <ons-tabbar var="myTabbar" my-tabbar> <ons-tab icon="home" label="ホーム" page="tab1.html" active></ons-tab> <ons-tab icon="fa-book" label="漫画" page="tab2.html"></ons-tab> </ons-tabbar> HTML側ナビ部分 <template id="tab1.html"><ons-page><ons-navigator var="myNavigator1" class="my-navi my-navi1" page="home.html"></ons-navigator></ons-page></template> <template id="tab2.html"><ons-page><ons-navigator var="myNavigator" class="my-navi my-navi2" page="manga.html"></ons-navigator></ons-page></template>

試したこと

myTabbar.onなので、タブ切り替え時のみ発火するかと思って処理を入れたのですが、カルーセルも発火してしまい動かなくなってしまいました。

補足情報(FW/ツールのバージョンなど)

Onsen UI 2.10.1

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

自己解決しました。
色々試して挙動がおかしいと判断し問い合わせを行った所、やはりOnsen UI側のバグだそうで、本来ない「prechange」イベントが発火してしまう状態だったそうです。
次期バージョン以降での改修が入るとの事です。

投稿2019/06/12 09:47

noric

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問