我试图通过添加离子滚动来使离子列表可滚动,但是不是可滚动的离子列表,整个页面变得可滚动。我如何使离子列表可滚动?这是我的代码:
<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>
答案 0 :(得分:7)
为<ion-scroll>
指令指定height
属性:例如
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>
答案 1 :(得分:0)
这对我有用:
<ion-content [scrollEvents]="true">
<ion-list>
...
</ion-list>
</ion-content>
答案 2 :(得分:0)
ion-scroll不再存在,可以使用div
上面的css可以像下面这样实现
tensorflow