質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

0回答

1121閲覧

【Monaca】【Onsen UI】ons-tabbarのswipeable(横スワイプ)を調整したい

todayyy

総合スコア31

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2021/02/19 15:51

実現させたいこと

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問