Question

下面是我的HTML ..由于某种原因，它不会滚动。这在Android和iPhone中都会发生。

<ion-view view-title="Active">
  <ion-content class="padding" style="text-align:center" scroll=true has-bouncing="true">

    <table class="user-block">
      <tr ng-repeat="user in userList">
        <td class="field1">{{ user.field1 }}</td>
        <td class="filed2">{{ user.field2 }}</td>
        <td><img class="face" 
                     ng-src="{{imageUrl}}/images/profile/{{user.facebookId}}.jpg">
        </td>
      </tr>
    </table>

  </ion-content>
</ion-view>

表格渲染得很好，但不会滚动。在我的CSS中，我没有设置溢出到任何值，所以值是默认的离子值。

是因为我在使用桌子吗？我应该使用其他一些定制离子成分吗？

Answer 1

必须是scroll="true"。很可能是一个简单的错字......

Answer 2

是的，有一些离子特定组件可以显示清单。

使用以下代码：

<ion-list>
        <ion-item ng-repeat="user in userList">
           {{user.field1}}
        </ion-item>
</ion-list>

Answer 3

这一行：

<ion-content class="padding" style="text-align:center" scroll=true has-bouncing="true">

应该是：

<ion-content class="padding" style="text-align:center" scroll="true" has-bouncing="true">

请注意＆＃34;＆＃34; for scroll = true

Answer 4

试试这个

<ion-view view-title="Active">
<ion-content overflow-scroll="true" class="padding" style="text-align:center" scroll=true has-bouncing="true">

<table class="user-block">
  <tr ng-repeat="user in userList">
    <td class="field1">{{ user.field1 }}</td>
    <td class="filed2">{{ user.field2 }}</td>
    <td><img class="face" 
                 ng-src="{{imageUrl}}/images/profile/{{user.facebookId}}.jpg">
    </td>
  </tr>
</table>

Answer 5

如果在渲染后更改容器的大小，有时会发生这种情况。检索到你正在循环的数组后，你需要调用：

$ionicScrollDelegate.resize();

确保将$ ionicScrollDelegate依赖项传入控制器。

更多信息： http://ionicframework.com/docs/api/service/ $ ionicScrollDelegate /

如果可能的话，我还建议使用内置离子指令而不是表。

Answer 6

尝试：

<ion-scroll></ion-scroll>

如果问题仍然存在，请尝试：

overflow-y: scroll

到.scss文件中的表。

Answer 7

在离子含量标签中使用它

overflow-scroll="true"

Answer 8

         add this line
         <ion-content scroll="true">

        also you can use css for your given class,
    <table class="user-block">

in your style.css add following css so that your class can scroll.

.user-block {
   height: 100%;
   width: 100%;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
}

内容不在离子滚动

8 个答案: