実現させたいこと
tabbarのswipeable機能を調節したいです。/にスワイプしても反応するので、真横のスワイプのみに反応するようなイメージです。
ツイッター(キーワード検索ページ)やインスタグラムのようなスワイプ移動が希望です。
試したこと
縦長のリストがある場合、/にスワイプすると横スワイプが先に実行されているように見えます。
コード
HTML
1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=auto"> 6 <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'"> 7 <script src="components/loader.js"></script> 8 <script src="lib/onsenui/js/onsenui.min.js"></script> 9 10 <link rel="stylesheet" href="components/loader.css"> 11 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 12 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 13 <link rel="stylesheet" href="css/style.css"> 14 15 <script> 16 ons.ready(function() { 17 console.log("Onsen UI is ready!"); 18 }); 19 20 document.addEventListener('show', function(event) { 21 var page = event.target; 22 var titleElement = document.querySelector('#toolbar-title'); 23 24 if (page.matches('#first-page')) { 25 titleElement.innerHTML = 'My app - Page 1'; 26 } else if (page.matches('#second-page')) { 27 titleElement.innerHTML = 'My app - Page 2'; 28 } 29 }); 30 /* 31 if (ons.platform.isIPhoneX()) { 32 document.documentElement.setAttribute('onsflag-iphonex-portrait', ''); 33 document.documentElement.setAttribute('onsflag-iphonex-landscape', ''); 34 } 35 */ 36 37 document.addEventListener('init', function(event) { 38 var page = event.target; 39 if (page.matches('#first-page')) { 40 list_show("list1"); 41 } else if (page.matches('#second-page')) { 42 list_show("list2"); 43 } else if (page.matches('#third-page')) { 44 list_show("list3"); 45 } else if (page.matches('#forth-page')) { 46 list_show("list4"); 47 } 48 }); 49 50 function list_show(dom_name){ 51 52 var code = new Array(); 53 54 code.push( 55 '<ons-list-header>Inset list</ons-list-header>' 56 ); 57 58 for(var i = 0; i < 50; i++){ 59 60 code.push( 61 '<ons-list-item modifier="longdivider">Item' + i + '</ons-list-item>' 62 ); 63 64 } 65 document.getElementById(dom_name).innerHTML = code.join(""); 66 67 } 68 </script> 69</head> 70<body> 71 <ons-navigator id="nav" page="tabbar.html"></ons-navigator> 72 73 <template id="tabbar.html"> 74 <ons-page> 75 <ons-toolbar> 76 <div class="center" id="toolbar-title"></div> 77 </ons-toolbar> 78 <ons-tabbar position="bottom" swipeable> 79 <ons-tab label="Tab 1" page="tab1.html" active> 80 </ons-tab> 81 <ons-tab label="Tab 2" page="tab2.html"> 82 </ons-tab> 83 <ons-tab label="Tab 3" page="tab3.html"> 84 </ons-tab> 85 <ons-tab label="Tab 4" page="tab4.html"> 86 </ons-tab> 87 </ons-tabbar> 88 </ons-page> 89 </template> 90 91 <ons-template id="tab1.html"> 92 <ons-page id="first-page"> 93 <p style="text-align: center;"> 94 This is the first page. 95 </p> 96 97 <ons-list modifier="inset" id="list1"></ons-list> 98 99 </ons-page> 100 </ons-template> 101 102 <ons-template id="tab2.html"> 103 <ons-page id="second-page"> 104 <p style="text-align: center;"> 105 This is the second page. 106 </p> 107 <ons-list modifier="inset" id="list2"></ons-list> 108 </ons-page> 109 </ons-template> 110 111 <ons-template id="tab3.html"> 112 <ons-page id="third-page"> 113 <p style="text-align: center;"> 114 This is the third page. 115 </p> 116 <ons-list modifier="inset" id="list3"></ons-list> 117 </ons-page> 118 </ons-template> 119 120 <ons-template id="tab4.html"> 121 <ons-page id="forth-page"> 122 <p style="text-align: center;"> 123 This is the forth page. 124 </p> 125 <ons-list modifier="inset" id="list4"></ons-list> 126 </ons-page> 127 </ons-template> 128</body> 129</html>
あなたの回答
tips
プレビュー