2

ons-popover内にons-listを使用していくつかの機能を提供する、ドロップダウンメニューを作っています。 メニューの項目数が多いので、ons-scrollerでスクロールさせたいのですが、スクロールが機能せず、一部分のみしか表示されません。低い解像度の端末でも表示できるよう、スクロール機能を付けたいのですが、どのようにすればよいのでしょうか?

ons.bootstrap();
ons.ready(function(){
  onReady();
});

function onReady(){
  ons.createPopover("PopOver.html");
}

function PopOverShowBtn(Target){
  var options={
    animation : "none"
  };
  PopOver.show(Target,options);

}
<ons-navigator var="app_navi">

  <ons-page id="TopPage">
    <ons-button onclick="PopOverShowBtn(this);">ポップオーバー表示</ons-button>
  </ons-page>
</ons-navigator>

<ons-template id="PopOver.html">
  <ons-popover var="PopOver" cancelable style='width:300px'>
    <ons-scroller style="width:100%;height:400px;">
      <ons-list style="text-align:center">
        <ons-list-item modifier='tappable'>項目1</ons-list-item>
        <ons-list-item modifier='tappable'>項目2</ons-list-item>
        <ons-list-item modifier='tappable'>項目3</ons-list-item>
        <ons-list-item modifier='tappable'>項目4</ons-list-item>
        <ons-list-item modifier='tappable'>項目5</ons-list-item>
        <ons-list-item modifier='tappable'>項目6</ons-list-item>
        <ons-list-item modifier='tappable'>項目7</ons-list-item>
        <ons-list-item modifier='tappable'>項目8</ons-list-item>
        <ons-list-item modifier='tappable'>項目9</ons-list-item>
        <ons-list-item modifier='tappable'>項目10</ons-list-item>
        <ons-list-item modifier='tappable'>項目11</ons-list-item>
        <ons-list-item modifier='tappable'>項目12</ons-list-item>
        <ons-list-item modifier='tappable'>項目13</ons-list-item>
        <ons-list-item modifier='tappable'>項目14</ons-list-item>
        <ons-list-item modifier='tappable'>項目15</ons-list-item>

      </ons-list>
    </ons-scroller>
  </ons-popover>
</ons-template>

2 件の回答 2

2

自己解決できましたので、要点をまとめておきます。

問題点(調査中に発見した問題点を含む)
・Ons-Popover内のOns-Scrollerが機能しない。
・コンソール画面に「Onsen UI require jqLite. Load jQuery after loading AngularJS to fix this error. jQuery may break Onsen UI behavior.」と警告があった。(jQueryとOnsenUI(AngularJs)の併用、ロードの順番に関する警告)

対処法
・loader.jsファイルの削除
・必要なJSコンポーネントの再インストール

これにより、loader.jsが再作成され、警告の解消、Scrollerも機能するようになりました。

※loadr.jsの働きを良く理解していないため、削除によって及ぶ影響があるのかもしれません。乱暴な方法かもしれませんが、今のところ問題なく(ビルドも試しました)動作しています。

0

質問に記載してあるコードで手元(プレビューとiOS版のデバッガ)ではスクロールが確認できましたが、それ以外の環境でのみ発生する事象でしょうか?

もしかしたらファイル構成やコードの記載場所等が問題の改善に繋がるかもしれないので、こちらで動作確認したコードを下記に記載します。

index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/popover.js"></script>
    <script>
    ons.bootstrap();
    ons.ready(function(){
      onReady();
    });
    </script>
</head>
<body>
  <ons-navigator var="app_navi">
    <ons-page id="TopPage">
      <ons-button onclick="PopOverShowBtn(this);">ポップオーバー表示</ons-button>
    </ons-page>
  </ons-navigator>
</body>
</html>

popover.js

function onReady(){
  ons.createPopover("PopOver.html");
}

function PopOverShowBtn(Target){
  var options={
    animation : "none"
  };
  PopOver.show(Target,options);
}

Popover.html

<ons-popover var="PopOver" cancelable style='width:300px'>
  <ons-scroller style="width:100%; height:300px;">
    <ons-list style="text-align:center">
      <ons-list-item modifier='tappable'>項目1</ons-list-item>
      <ons-list-item modifier='tappable'>項目2</ons-list-item>
      <ons-list-item modifier='tappable'>項目3</ons-list-item>
      <ons-list-item modifier='tappable'>項目4</ons-list-item>
      <ons-list-item modifier='tappable'>項目5</ons-list-item>
      <ons-list-item modifier='tappable'>項目6</ons-list-item>
      <ons-list-item modifier='tappable'>項目7</ons-list-item>
      <ons-list-item modifier='tappable'>項目8</ons-list-item>
      <ons-list-item modifier='tappable'>項目9</ons-list-item>
      <ons-list-item modifier='tappable'>項目10</ons-list-item>
      <ons-list-item modifier='tappable'>項目11</ons-list-item>
      <ons-list-item modifier='tappable'>項目12</ons-list-item>
      <ons-list-item modifier='tappable'>項目13</ons-list-item>
      <ons-list-item modifier='tappable'>項目14</ons-list-item>
      <ons-list-item modifier='tappable'>項目15</ons-list-item>
    </ons-list>
  </ons-scroller>
</ons-popover>
8
  • コンソールを見ますと、 「Onsen UI require jqLite. Load jQuery after loading AngularJS to fix this error. jQuery may break Onsen UI behavior.」という警告があり、ロードする順序について警告されているものと思います。これらは、「Monaca」側でやってくれていることだと思うのですが、これが起因していることもあるのかもしれません。
    – eclipse
    Commented 2015年9月14日 5:46
  • @eclipse 手元で事象が再現できていないため具体的な解決策が出せず申し訳ないのですが、該当の警告(「Onsen UI require jqLite〜」)はOnsen UI(AngularJS)とjQueryを併用しているために出力されています(読み込む順番をOnsen UI, jQueryにすると警告自体は消えると思います)。メッセージにも「jQuery may break Onsen UI behavior.」とあるようにOnsen UIとjQueryの併用は難しい(やり方次第では可能のようです)ため、できるだけどちらかに絞って利用した方が良いと思います。
    – ita_3y
    Commented 2015年9月14日 15:02
  • 細かく読んでくださってありがとうございます。 読み込む順番をOnsen UI, jQueryの順にするというのは、どこで設定できるのでしょうか?
    – eclipse
    Commented 2015年9月14日 15:32
  • @eclipse <script src=〜></script>の順番を変えるだけで大丈夫です。
    – ita_3y
    Commented 2015年9月14日 22:15
  • 1
    いただいたヒントを元に、Monaca側のloader.jsファイルを削除し、もう一度、JSコンポーネントを再設定し、その時に、OnsenUIをインストールしたのちにJqueryをインストールすることで、警告も消え、scrollerも動作するようになりました。 ありがとうございました。
    – eclipse
    Commented 2015年9月16日 12:05

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。