Горизонтальная прокрутка в ионном 2

Я пытаюсь реализовать горизонтальную прокрутку на ионной странице 2. Но контент всегда получает вертикальную прокрутку.

Я попробовал написать свой собственный css, установив 'overflow-x для прокрутки'. Но это не сработало. Я также попробовал ионный ионно-прокруточный компонент, установив 'scrollX = true'. Но весь контент скрыт. то есть он вообще не был виден на странице. Ниже приведен пример кода, который я использовал для ионного свитка. Не уверен, что именно я здесь пропал.

Любые рекомендации по этому PLS?. (Я новичок в 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>

Ответы

Ответ 1

Я достиг горизонтального свитка с несколькими ионными компонентами:

Ион-аватар прокручиваемый 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;
  }

Это работало для меня с ионной версией 3.2.0.

пример ионного scrollX

Ответ 2

Ни один из ответов здесь не работал у меня. В результате я получил следующий 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;
  }
}

Ответ 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>

Ответ 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>`

Ответ 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>

Ответ 6

Не уверен, что это точная проблема, с которой вы столкнулись, но если ваш просмотр с включенным обратным отображением предотвратит горизонтальную прокрутку в любом месте этой страницы. Здесь, как отключить его внутри класса @Page:

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

Ответ 7

У меня тоже была эта проблема. Я решаю это следующим образом:

1. Добавьте это свойство в тэг <ion-scroll> в ваш .html файл:

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

2. Добавьте этот файл .scss:

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

Это должно сработать для вас:)