angularjs - 如何使 ionic 列表可滚动?

标签 angularjs ionic-framework

我试图通过添加 ion-scroll 来使 ionic-list 可滚动,但不是 ion-list 可滚动,而是整个页面变得可滚动。我如何使 ionic 列表可滚动?这是我的代码:

<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>指令a height属性:例如。

CodePen Demo/CodePen Full Page (在浏览器的移动 View 上观看效果最佳)

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

关于angularjs - 如何使 ionic 列表可滚动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42756322/

相关文章:

javascript - Angular-Formly:隐藏/禁用服务中的字段

javascript - 传递/路由包含函数原型(prototype)的对象

angular - 获取错误对象(...)的 Ionic App Availability 插件不是函数

ionic-framework - ionic 标签的最佳实践

css - 无法在 ionic 元素中添加边框底部

ionic-framework - 如何检测从 ionic 3 中的推送通知打开的应用程序?

javascript - 标签上的 Angular.js ng-click 事件触发两次

javascript - Angular : Adding animation when div tag is updated

javascript - AngularJS:使用拦截器更新 token (使用服务)

html - Ionic - 固定 div 在 ion-content 内滚动