ionic 2中的水平滚动

Question

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

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

请问有什么指导吗？（我是 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

不确定这是否正是您遇到的问题，但如果您在启用了向后滑动的视图中，它将阻止该页面上任何位置的水平滚动。这是在@Page class:

中关闭它的方法

constructor(nav: NavController) {
   nav.swipeBackEnabled = false;
}

Answer 2

对于水平滚动，您需要添加以下标签：

<scroll-content>
    <ion-scroll scrollX="true" class="item">
        //your content
    </ion-scroll>
</scroll-content>`

您的内容应该在其中。

这段代码对我有用：

<scroll-content >
    <ion-scroll scrollX="true"  class="item">
        <ion-row>
            <ion-col width-25>
                Item 1 
            </ion-col> 
            <ion-col width-25>
                Item 1 
            </ion-col> 
            <ion-col width-25>
                Item 1 
            </ion-col> 
            <ion-col width-25>
                Item 1 
            </ion-col> 
            <ion-col width-25>
                Item 1 
            </ion-col>  
            <ion-col width-25>
                Item 1 
            </ion-col> 
            <ion-col width-25>
                Item 1 
            </ion-col> 
            <ion-col width-25>
                Item 1 
            </ion-col> 
            <ion-col width-25>
                Item 1 
            </ion-col> 
            <ion-col width-25>
                Item 1 
            </ion-col> 
        </ion-row>
    </ion-scroll>
</scroll-content>`

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>

Answer 4

对于 Ionic 2 RC，这段代码对我有用，我想滚动图标列表：

<ion-item>
 <ion-scroll scrollX="true" style="height: 50px;" >
  <ion-icon *ngFor="let icon of icons; let i = index" name={{icon.icon_name}} (click)="selectIcon(icon, i)"></ion-icon>
 </ion-scroll>
</ion-item>

Answer 5

我以前也遇到过这个问题。我是这样解决的：

1.将此属性添加到您的 .html 文件中的 <ion-scroll> 标签：

<ion-scroll scrollX="true">
... your content ...
</ion-scroll>`

2。将此添加到您的 .scss 文件中：

ion-scroll{
  overflow: scroll; 
  white-space: nowrap;
}

这应该适合你:)

Answer 6

None 这里的答案对我有用。我最终得到的是以下 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 7

我用几个离子组件实现了水平滚动：

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 版本时很有效。

ionic scrollX example

ionic 2中的水平滚动

Horizontal scroll in ionic 2

ionic-framework

ionic2