带有溢出滚动的Onsen 2.0列表不起作用

Question

我有一个ons-list但是当列表比页面长时，你可以滚动或做任何事情来查看其他项目。

<div id="mycontacts" style="position: absolute; width: 100%; top: 0px;">
  <ons-list style="background: #f9f9f9;">
    <ons-list-header style="background: #f9f9f9;">Contacts:</ons-list-header>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
  </ons-list>
</div>

如何制作一个列表，用户可以向下滚动以查看更多/其他列表项目？

编辑：

我真正的代码在哪里不起作用是这样，有很多元素可能没有被透露，因为我缺少javscript但是列表的问题应该在这个html行中解决。

<!-- TAB 1 STARTSEITE -->
<ons-template id="tab1.html">
<ons-page id="tab1">
<ons-toolbar style="">
<div class="left"> <!--left-->
  <ons-toolbar-button onclick="fn.open()">
    <ons-icon icon="md-menu"></ons-icon>
  </ons-toolbar-button>
</div>
<div id="tab1toolbarcenter" class="center"><!--center-->
  <ons-toolbar-button id="maincarousel1" onclick="maincarousel(1)" style="opacity: 1;">
    <ons-icon icon="fa-calendar-o"></ons-icon>
  </ons-toolbar-button>
  <ons-toolbar-button id="maincarousel2" onclick="maincarousel(2)" style="opacity: 0.6;">
    <ons-icon icon="ion-chatboxes"></ons-icon>
  </ons-toolbar-button>
  <ons-toolbar-button id="maincarousel3" onclick="maincarousel(3)" style="opacity: 0.6;">
    <ons-icon icon="fa-newspaper-o"></ons-icon>
  </ons-toolbar-button>
</div>
<div class="right"><!--right-->
  <ons-toolbar-button id="main_rightupicon" onclick="showdialog('dialog-2')">
    <ons-icon icon="filter"></ons-icon>
    </ons-toolbar-button>
    </div>
    </ons-toolbar>

   <ons-carousel fullscreen swipeable auto-scroll id="maincarousel">
   <!-- Seite 1 -->
   <ons-carousel-item id="seite1" style="background: #f9f9f9;">
   <div id="main_table" style="height: 460px; width: 100%; margin-top: 30px; background: #f9f9f9;">
    <center><div id="tabellenueberschrift" style="margin-top: 0px; height: 50px; line-height: 21px; color: black; font-size: 18px; background: #f9f9f9; opacity: 0.8;"></div></center>
    <div id="main_pfeillinks" style="width: 50%; height: 50px; float: left; margin-top: -50px;">
      <div style="width: 40px; height: 40px; margin-top: 3px; left: 9px; position: absolute;"><ons-ripple color="#C8C8C8" style="opacity: 0.4; border-radius: 20px;"></ons-ripple></div>
      <ons-icon icon="fa-angle-left" size="40px" style="color: black; opacity: 0.15; margin-left: 20px;"></ons-icon>
      </div>
      <div id="main_pfeilrechts" style="width: 50%; height: 50px; float: right; margin-top: -50px;">
      <div style="width: 40px; height: 40px; margin-top: 3px; right: 9px; position: absolute;"><ons-ripple color="#C8C8C8" style="opacity: 0.4; border-radius: 20px;"></ons-ripple></div>
      <ons-icon icon="fa-angle-right" size="40px" style="color: black; opacity: 0.15; float: right; margin-right: 20px;"></ons-icon>
      </div>
      <center><ons-progress-circular id="main_tabelle_loader" indeterminate style="margin-top: 66px; visibility: visible;"></ons-progress-circular></center>
      <table id="kalender" style="margin-top: -105px; opacity: 0.3; background: #f9f9f9;"></table>
      </div>
      <p id="main_sortieren_text" style="text-align: center; opacity: 0.6; padding-top: 20px;">
      </p>
      <ons-fab position="bottom right">
       <ons-icon icon="fa-question"></ons-icon>
      </ons-fab>
</ons-carousel-item>  
<!-- Seite 2 -->
<ons-carousel-item fullscreen swipeable overscrollable id="seite2" style="background: #f9f9f9;">
  <ons-list id="seite2_suchenkontaktetabelle" style="position: absolute; width: 100%; top: 0px; visibility: hidden; background: #f9f9f9;">
  </ons-list>
  <center><ons-progress-circular id="seite2_mainloader" indeterminate style="margin-top: 300px; visibility: hidden;"></ons-progress-circular></center>
</ons-carousel-item>
<!-- Seite 3 -->
<ons-carousel-item fullscreen swipeable auto-scroll id="seite3" style="background: #f9f9f9;">
  <p style="text-align: left; margin-left: 16px; opacity: 0.7; padding-top: 20px; font-size: 18px;">
    Neuigkeiten (prealpha.debugv3.5.9)
  </p>
  <div style="margin: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.2); background-color: white; height: 150px;"><ons-ripple color="#E2E2E2"></ons-ripple></div>
  <div style="margin: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.2); background-color: white; height: 150px;"><ons-ripple color="#E2E2E2"></ons-ripple></div>
  <div style="margin: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.2); background-color: white; height: 150px;"><ons-ripple color="#E2E2E2"></ons-ripple></div>
  </ons-carousel-item>
  </ons-carousel>
  </ons-page>
  </ons-template>

问题在于Seite 2我使用javascript添加ons-list-items到＆＃39; seite2_suchenkontaktetabelle＆＃39;然后你无法向下滚动以查看所有项目。有人发现了我的错吗？

Answer 1

我相信你的问题是由于父div。在这个codepen中，我删除了它并将您的属性添加到ons-list本身。我已经使用调试器在Android中对其进行了测试，并且工作正常。

<ons-list id="mycontacts" style="position: absolute; width: 100%; top: 0px; background: #f9f9f9;">
    <ons-list-header style="background: #f9f9f9;">Contacts:</ons-list-header>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
  </ons-list>

编辑：哦，使用完整的代码，您会遇到完全不同的问题。对于每个轮播项目，您需要一个页面。我更新了codepen以向您展示它是如何工作的。这已在Android上得到验证。