ステータスバーをタップするとページの先頭にスクロールするのが慣例だが、
Monaca(Cordova)のデフォルトではステータスバーをタップした際のイベントを取得できない。
(Cordovaってプラグインなしでは読み込んだ写真のexifから位置情報を取れないし、アプリにURLスキームが付けれなかったりで痒い所に手が届かないのが残念)
Objective-Cはかじった程度だから自分でプラグイン作ることもできず、半ば諦めてたところ、
Githubでタップイベントを取得できるプラグインを作ってくれてる神様がいたので紹介。
Cordova StatusbarTap
github.com/wallneradam/cordova-statusbar-tap
MIT License / ios:対応 / Android:未対応
今回動作確認したバージョン:Cordova 6.2.0 / iOS 10.2
使い方
使い方はすごく簡単。
1 2 3 |
window.addEventListener('statusbarTap', function() { alert('ステータスバーがタップされました'); }); |
ページの先頭にスクロールする動作を実装するには、今表示しているページを特定する必要がある。
Onsenuiのons-navigatorで特定するならこんな感じかな。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// HTML <ons-navigator var="myNavigator" page="page1.html"></ons-navigator> <ons-template id="page1.html"> <ons-page id="page1"> <ons-toolbar> <div class="center">Page 1</div> </ons-toolbar> <p>This is the first page.</p> <ons-button ng-click="myNavigator.pushPage('page2.html', {data: {title: 'Page 2'}})">Push page</ons-button> </ons-page> </ons-template> |
1 2 3 4 5 6 7 8 9 |
// javaScript window.addEventListener('statusbarTap', function() { alert(myNavigator.topPage.pushedOptions.page); // => page1.html if(myNavigator.topPage.pushedOptions.page == 'page1.html') { //ここにpage1.htmlの表示中にステータスバーがタップされたときの処理を書いていく // 例えば、ページの先頭にスクロールするとか $('#page1 .page__content').animate({ scrollTop: 0 }, 'normal'); } }); |