私は ons リストを持っていますが、リストがページよりも長くなると、スクロールしたり、他のアイテムを表示したりできます。
<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>
ユーザーが下にスクロールして他のリスト項目を表示できるリストを作成するにはどうすればよいですか?
編集：
それが機能しない私の実際のコードはこれです。javascriptが見つからないため、おそらくダイアプライされていない要素がたくさんありますが、リストの問題はこの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」に追加すると、下にスクロールしてすべてのアイテムを表示できなくなります。誰かが私の過ちを見つけましたか？