angularjs – 如何使离子列表可滚动？

发布时间：2020-12-17 17:32:49 所属栏目：安全来源：网络整理

导读：我试图通过添加离子滚动来创建一个离子列表可滚动但不是可滚动的离子列表整个页面变得可滚动.我如何使离子列表可滚动？这是我的代码： ion-view title="Omnipay - Welcome" id="page5"ion-content padding="true" class="has-header" div img src="img/omnip

我试图通过添加离子滚动来创建一个离子列表可滚动但不是可滚动的离子列表整个页面变得可滚动.我如何使离子列表可滚动？这是我的代码：

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

解决方法

给你的< ion-scroll>指令高度属性：例如.

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!