シンプル体重管理」や「ナンバーズサーチ」など、これまでAngularJSOnsen UIの組み合わせでアプリ開発を行ってきたが、ユーザー側から「重い」「遅い」などの声が上がってきており、以前から軽いと評判のRiot.jsというUIライブラリを使用してアプリ開発できないだろうか・・・と思いつつも時間だけが経過。
やっと重い腰を上げてみた。

今回は、Onsen UIの基本的な動きであるons-navigatorで画面遷移を試みる。

MonacaクラウドIDEで、「Onsen UI V2 JS Minimum」を作成し、最新版の「riot+compiler.min.js」を[/www/lib/liotjs/]フォルダにアップロードする。
このとき「+」がスペースに置き換わる場合があるので「名前を変更」でファイル名を修正する。
[/www/tag/]フォルダに各tagファイルを作成する。

はまったところは、Onsen UIのtemplateons-pageons-toolbarの間にRiot.jsのカスタムタグを入れると、Onsen UIのコンテンツ領域が正しく設定されない、CSSが適用されない点。
いろいろと試した結果、下記のようなコードとなった。

Android 6.0.1

iOS 10.3.3

index.html

page1.tag

page2.tag

Webフロントエンド ハイパフォーマンス チューニング

新品価格
¥2,894から
(2018/7/14 20:00時点)

【Monaca】Riot.js + Onsen UI V2 ons-navigatorで画面遷移する
Tagged on: