离子 2 中的水平滚动 [英] Horizontal scroll in ionic 2

问题描述

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

I have been trying to implement horizontal scroll in ionic 2 page. But the content always gets vertically scrolled.

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

I tried writing my own css by setting 'overflow-x to scroll'. But it didn't work. I also tried ionic's ion-scroll component by setting 'scrollX= true'. But the entire content got hidden. i.e it was not visible on the page at all. Below is the sample code i used for ion-scroll. Not sure what exactly i am missing here.

对此有任何指导吗?.(我是 Ionic 2 和 CSS 的新手.如果问题太简单，抱歉.)

Any guidance on this pls?. (I am new to Ionic 2 and CSS. So sorry if the question is too simple.)

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

推荐答案

我用几个 ionic 组件实现了水平滚动:

I achieved the horizontal scroll with several ionic components:

ion-avatar 可滚动 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>

离子图标可滚动 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;
  }

使用 ionic 3.2.0 版本对我有用.

That worked for me with ionic 3.2.0 version.

ionic scrollX 示例

这篇关于离子 2 中的水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！