◆前提
現在、onsenuiを使用してアプリ開発を行っています。
◆疑問点
onsenuiのons-back-buttonを押して、前画面に遷移した際に指定した関数が叩かれるようにoptionsのcallbackを設定したいですが、その方法がわかりません
<ons-back-button id="backButton"></ons-back-button>
上記に対して
Onsenui BackButtonリファレンス
options.callbackを設定する方法をご教示していただけないでしょうか?
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答1件
0
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> 5 <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css"> 6 <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script> 7 <script> 8 document.addEventListener('init', function(event) { 9 var page = event.target; 10 11 if (page.id === 'page1') { 12 page.querySelector('#push-button').onclick = function() { 13 document.querySelector('#myNavigator').pushPage('page2.html', { 14 data: { 15 title: 'Page 2' 16 } 17 }); 18 }; 19 } //...略 20 else if (page.id === 'page2') { 21 page.querySelector('ons-toolbar .center').innerHTML = page.data.title; 22 // ここから 23 var backButton = page.querySelector('ons-back-button'); 24 backButton.options = { 25 callback: function() { 26 var page1 = document.querySelector('#page1'); // 前に戻る処理(slide)完了後#page1の 27 var page1Paragraph = page1.querySelector('p'); // 子孫 p 要素の 28 page1Paragraph.textContent = this.hoge; // textContentプロパティに自前のプロパティ代入 29 }, 30 animation: 'slide', // “slide”, “lift”, “fade” and “none” 31 hoge: 'ほげほげ' // 自前のプロパティ 32 }; 33 /* // page2の戻るボタン(ons-back-button要素)をClickしたタイミングで 34 var page2 = document.querySelector('#page2'); 35 var backButton = page2.querySelector('ons-back-button'); 36 backButton.onClick = function (event) { console.log(this); }; 37 // backButton.addEventListener('click', function (event) {console.log(this); event.preventDefault(); }); 38 */ 39 } 40 //...略 41 }); 42 </script> 43 </head> 44 <body> 45 <ons-navigator swipeable id="myNavigator" page="page1.html"></ons-navigator> 46 <template id="page1.html"> 47 <ons-page id="page1"> 48 <ons-toolbar> 49 <div class="center">Page 1</div> 50 </ons-toolbar> 51 <p>This is the first page.</p> 52 <ons-button id="push-button">Push page</ons-button> 53 </ons-page> 54 </template> 55 <template id="page2.html"> 56 <ons-page id="page2"> 57 <ons-toolbar> 58 <div class="left"> 59 <ons-back-button>Page 1</ons-back-button> 60 </div> 61 <div class="center"></div> 62 </ons-toolbar> 63 <p>This is the second page.</p> 64 </ons-page> 65 </template> 66 </body> 67</html>
ons-back-buttonのoptionsプロパティに任意のオブジェクトを渡す例です
Onsen UI てのは初見
よく調べずに実例見て適当に書いただけなので参考程度に
投稿2022/10/23 03:55
編集2022/10/26 11:02総合スコア56
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/10/25 16:39
2022/10/26 11:02