如何使離子列表可滾動？

即時通訊設法通過添加離子滾動可滾動的離子列表，而不是可滾動的離子列表整個頁面變得可滾動。我如何製作離子列表可滾動的？這裏是我的代碼：如何使離子列表可滾動？

<ion-view title="Omnipay - Welcome" id="page5"> 
<ion-content padding="true" class="has-header"> 
<div> 
    <img src="img/omnipay_logo.jpg" style="display: block; width: 100%; height: auto; margin-left: auto; margin-right: auto;"> 
</div> 
<h3 id="omnipayWelcome2-heading13" style="color:#000000;">My Info:</h3> 
<h4 id="omnipayWelcome2-heading15" style="color:#000000;">Balance:</h4> 
<h4 id="omnipayWelcome2-heading14" style="color:#000000;">Transaction History</h4> 
<ion-scroll direction="xy" > 
     <ion-list can-swipe="listCanSwipe"> 
     <ion-item ng-repeat="item in data1"> 
      Date: {{item.date}}<br>Transaction: {{item.transaction}}<br>Merchant: {{item.merchant}}<br>Amount: {{item.amount}} 
     </ion-item> 
     </ion-list> 
</ion-scroll> 
<a ui-sref="menu.mainMenu" id="transactionHistory-button1" class="button button-positive button-block">Back</a> 
<button class="button button-positive button-block" ng-click="refreshPage()">Refresh</button> 
</ion-content> 
</ion-view>

來源

2017-03-13 Sydnie S

給你<ion-scroll>指令中height屬性：EG。

CodePen Demo/CodePen Full Page（最佳所見於瀏覽器的移動視圖）

<ion-scroll style="height: 200px"> 
    <ion-list> 
    <ion-item ng-repeat="item in items">{{item}}</ion-item> 
    </ion-list> 
</ion-scroll>

來源

2017-03-13 04:22:01

如何使離子列表可滾動？

回答

相關問題