OnsenUI 小ネタ集

自分で使う小ネタ集
Ver 1.3.10 対象

一覧から詳細ページへIDを渡す

一覧ページ

<ons-list-item  ng-repeat="book in books"

  ng-click="hogeNavigator.pushPage('/show.html', {id:book.id } );">

詳細ページのコントローラ

var page = $window.hogeNavigator.getCurrentPage();

var id = page.options.id;

サポート対象以外で実用に耐えるブラウザ

OnsenUIが実用に耐えるWebブラウザを調べました。(あくまで自分用途での場合)
Githubによる記述ではFirefox,IE,Edgeは公式のサポートに入っていません。

• ◯ Chrome(PC, Android[アプリ+4.4以上の標準])
• ◯ Safari(Mac, iOS)
• △ Firefox(PC) 限りなく◯
• × Firefox(Android) -> 動作はするが とても遅い,コンポーネントが壊れる
• △ Android4.4未満の標準ブラウザ(Chromeベースも含む) 
• △  IE11 -> Angular関係で修正が必要(別記事に記載)
• -   Edge 未検証

ons-listの代わりにCSSをあてる

代わりにCSSであてる。

<ul class="list"> 幅いっぱいのリスト

<li class="list__item"> 幅いっぱいのリストのアイテム
<li class="list__header">幅いっぱいのリストの ヘッダーアイテム

<ul class="list list--inset"> insetリスト

<li class="list__item list__item--inset"> insetの中のアイテム

<li class="list__header ons-list-header-inner">insetのヘッ

<li class="list__item list__item--tappable"> タップアクション

<li class="list__item list__item--chevron">　タップアクション + 右端に>をつける

ons-row ons-colの代わりにCSSをあてる

ons-listと違い単純な分割の場合のみCSSを代わりにあてる

<ons-row>

<div class="row ons-row-inner">

<ons-col>

<div class="col ons-col-inner">

align="center"をつけた場合は　col-center　をつける

Androidでキーボード表示時にTabbarを隠す

Androidでキーボードが表示されると下に固定してあったタブバーがキーボードの上に張り付いて見辛くなります。

ionic keyboard pluginを使ってソフトウェアキーボードの表示、非表示のイベントをとることでタブの表示・非表示を行う事ができます。

iOSではキーボードはページの上に覆うような形なので問題はありませんでした。

popover内でスクロールする

ipadでドロップダウンを開くと(ネイティブの)popoverが開きその中でスクロールをして項目を選択する事ができます。

popoverの中全体をスクロールさせる

.hoge_popover .popover__content {
    max-height: 256px;
    overflow-y: auto;
    display: block;
    -webkit-overflow-scrolling: touch;
}

popoverの中の一部をスクロールさせる(最上部に検索テキストボックスを置く場合など)
.my_scroll_div{
  height: 350px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

遷移アニメーションをスムーズにする

Controllerの初期処理が重たいとアニメーションがガタガタするので、遷移アニメーション終了後に処理を行うようにする。

//ページ読み込みの場合
navigator.once("postpush", function () {
        initPage();
});

//重ねたページをポップしたときに処理を入れる場合
navigator.once("postpop", function () {
        doAction();
});