Question

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

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

对此有何指导？（我是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

int x = p.getX();

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

<强> SCSS

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

这对我来说非常适用于离子3.2.0版本。

ionic scrollX example

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

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

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

对于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 6

我曾经也遇到过这个问题。我这样解决：

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

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

<强> 2。将此添加到.scss文件：

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

那应该对你有用：）

Answer 7

不确定这是否是您遇到的确切问题，但如果您在启用了向后滑动的视图中，则会阻止该页面上任何位置的水平滚动。以下是如何在@Page类中关闭它：

$packs = \App\OrderedPack::where('ordered_packs.orderID', '=', $orderID)
->with('packs.pack_items.items')
->get();

离子2中的水平滚动

7 个答案: