###前提・実現したいこと
ons-splitter内にあるlist-itemの、特定の項目だけにアニメーションをつけてページ遷移させたいのですができません。
可能な方法を教えて頂きたいです。
###発生している問題・エラーメッセージ
「トップページ」を押すと、エラーが出ます。
Uncaught TypeError: Cannot set property 'onclick' of null www/index.html: 62
そして、なぜかバックボタンで戻れなくなりました……。
Uncaught TypeError: Cannot read property '_callback' of undefined www/lib/onsenui/js/onsenui.min.js: 5
###該当のソースコード
「設定」を押して遷移させたいのですが、アニメーションがつきません。
ng-click="pushPage()"で遷移するものはアニメーションをつけることができましたが、これだけできません。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <script src="lib/onsenui/js/onsenui.min.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> <link rel="stylesheet" href="css/style.css"> <script> ons.ready(function() { console.log("Onsen UI is ready!"); }); window.fn = {}; window.fn.open = function() { var menu = document.getElementById('menu'); menu.open(); }; window.fn.load = function(page) { var content = document.getElementById('content'); var menu = document.getElementById('menu'); content.load(page) .then(menu.close.bind(menu)); }; </script> </head> <body> <ons-splitter> <ons-splitter-side id="menu" side="left" width="200px" collapse swipeable> <ons-navigator id="menu-navigator" animation="lift" page="menu"> <ons-page id="menuPage"> <ons-list modifier="noborder"> <ons-list-item onclick="fn.load('home.html')" tappable> トップページ </ons-list-item> <ons-list-item onclick="fn.load('settings.html',{animation:lift})" id="menu-settings" tappable> 設定 </ons-list-item> <ons-list-item style="position:absolute; bottom:50px;" onclick="fn.load('tips.html')" modifier="nodivider" tappable> その他 </ons-list-item> </ons-list> </ons-page> </ons-navigator> </ons-splitter-side> <ons-splitter-content id="content" page="home.html"></ons-splitter-content> </ons-splitter> <!--設定画面を表示する時のアニメーション--> <script> document.addEventListener('init', function(event) { var page = event.target; if (page.id === 'home') { page.querySelector('#menu-settings').onclick = function() { document.querySelector('#menu-navigator').pushPage('settings.html'); }; // ここのpushPageの表記がマズい? }}); </script>
###試したこと
調べて少々書き直したりもしましたが、初心者なのでよく分からず戻して触らないようにしたりしました。
###補足情報(言語/FW/ツール等のバージョンなど)
Onsenui v2.0.0-rc1
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。