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

如何製作一個列表，用戶可以向下滾動以查看更多/其他列表項目？

編輯：

我在那裏不工作實際的代碼是這樣的，有很多這些也許不是diaplyed WLL東陽我的思念javscript，但與列表中的問題，應該在這個網站線來解決元素。

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

的問題是在頁面2我用JavaScript附加功能列表項爲「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> 

編輯：哦，與你的完整代碼，你有一個完全不同的問題。對於每個旋轉木馬項目，您需要一個ons頁面。我更新了codepen以向你展示它是如何工作的。這也已在Android上得到驗證。