离子2中的水平滚动

Question

我一直在尝试在离子2页面中实现水平滚动.但内容总是垂直滚动.

我尝试通过设置'overflow-x to scroll'来编写自己的css.但它没有用.我还通过设置'scrollX = true'来尝试离子的离子滚动组件.但整个内容都被隐藏了.即它在页面上根本看不到.下面是我用于离子滚动的示例代码.不确定我到底错过了什么.

对此有何指导？(我是Ionic 2和CSS的新手.很抱歉,如果问题太简单了.)

<ion-navbar *navbar primary>
    <ion-title>
        Title
    </ion-title>
</ion-navbar>

<ion-content>
    <ion-scroll scrollX="true">

        <ion-card>
            <ion-card-content>
                content
            </ion-card-content>
        </ion-card>
        <ion-card>
            <ion-card-content>
                content
            </ion-card-content>
        </ion-card>

    </ion-scroll>
</ion-content>

Answer 1

这里没有任何答案对我有用.我最终得到的是以下HTML.

<ion-scroll scrollX style="height:200px;">
  <div class="scroll-item">
    Item 1
  </div>
  <div class="scroll-item">
    Item 2
  </div>
</ion-scroll>

随着这个SCSS.儿童元素很重要display: inline-block.

ion-scroll[scrollX] {
  white-space: nowrap;
  .scroll-item {
    display: inline-block;
  }
}

Answer 2

我用几种离子成分实现了水平滚动:

离子化身可滚动的HTML

<ion-content>
<ion-row>
    <ion-item no-lines>
    <ion-scroll scrollX="true" scroll-avatar>
        <ion-avatar>
          <img src="../../assets/whatever.png" *ngFor="let avatar of avatars" class="scroll-item"/>
        </ion-avatar>
    </ion-scroll>
    </ion-item>
  </ion-row>
</ion-content>

ion-icon可滚动HTML

<ion-content>
  <ion-row>
    <ion-item no-lines>
      <ion-scroll scrollX="true">
        <ion-icon *ngFor="let avatar of avatars" name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
      </ion-scroll>
    </ion-item>
  </ion-row>
</ion-content>

SCSS

  ion-scroll[scrollX] {
    white-space: nowrap;
    height: 120px;
    overflow: hidden;

    .scroll-item {
      display: inline-block;
    }

    .selectable-icon{
      margin: 10px 20px 10px 20px;
      color: red;
      font-size: 100px;
    }

    ion-avatar img{
      margin: 10px;
    }
  }

  ion-scroll[scroll-avatar]{
    height: 60px;
  }

  /* Hide ion-content scrollbar */
  ::-webkit-scrollbar{
    display:none;
  }

这对我有离子3.2.0版本.

离子scrollX的例子

Answer 3

您需要定义的高度你的<ion-scroll>容器.如果不这样做,则<ion-scroll>元素的高度似乎总是为0.

例:

<ion-scroll scrollX="true" style="width:100vw;height:350px">
    <img src="test.jpg style="border:1px dotted red;width:700px;height:350px">
</ion-scroll>