web-dev-qa-db-ja.com

ionic 2の水平スクロール

私はionic 2ページで水平スクロールを実装しようとしていますが、コンテンツは常に垂直にスクロールされます。

「overflow-x to scroll」を設定して、独自のCSSを作成しようとしました。しかし、うまくいきませんでした。また、 'scrollX = true'を設定して、ionicのion-scrollコンポーネントを試しました。しかし、コンテンツ全体が隠されました。つまり、ページにまったく表示されませんでした。以下は、イオンスクロールに使用するサンプルコードです。ここに何が欠けているのか正確にはわかりません。

この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>
ionic-frameworkionic2
17
Thangaraj Esakky

いくつかのionicコンポーネントで水平スクロールを実現しました。

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>

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

ionic 3.2.0バージョン。

イオンscrollXの例

8
Juan Antonio Herrerías

ここでの答えはどれも役に立たなかった。最終的に私が見つけたのは、次の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;
  }
}
14
cnotethegr8

<ion-scroll>コンテナのheightを定義する必要があります。これを行わないと、<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>
5
ntaso

水平スクロールの場合、次のタグを追加する必要があります。

<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>`
3
user6132962

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>
1
Akis Tofas

私もこの問題を抱えていました。私はこのように解決します：

1。このプロパティを追加します<ion-scroll>タグの.htmlファイル：

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

2。これを.scssファイルに追加：

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

それはあなたのために働くはずです:)

1
Fran Sandi

これがあなたが持っている正確な問題であるかどうかはわかりませんが、スワイプバックが有効になっているビューの場合、そのページのどこでも水平スクロールができなくなります。 @Pageクラス内で無効にする方法は次のとおりです。

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