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

Question

我有一个列表，但是当列表比页面长时，您可以滚动或执行任何操作来查看其他项目。

<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>

如何创建一个用户可以向下滚动以查看 more/the 其他列表项的列表？

编辑：

我的实际代码是这样的，它不起作用，因为我缺少 javscript，所以有很多元素可能没有 diaplyed，但是列表的问题应该在 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 添加到 'seite2_suchenkontaktetabelle'，然后您无法向下滚动以查看所有项目。有人发现我的错了吗？

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 上得到验证。

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

Onsen 2.0 List with overflow scroll does not work

html

javascript

cordova

onsen-ui

onsen-ui2