web-dev-qa-db-ja.com

ionic 3.2-イオンコンテンツのスクロールを無効にする方法

Ionic 3.2バージョンでアプリを開発しています。ion-scroll内にイオンリフレッシャーがあります。ion-contentのスクロールを無効にし、ion-refresherをスクロールするときにion-scroll内にion-listを表示したい。しかし、それは失敗します。

  • no-bounce（<ion-content no-bounce>）とdisable-scroll（<ion-content disable-scroll>）を試しましたが、コンテンツがスクロールします
  • ion-fixedをcontent内とdivのすぐ下のcontent内に配置しようとしました。しかし、ion-refresherは機能しません。
  • scroll="false"を試しました（ionic 1.0）のように）まだスクロールしています

コードの下;

    <ion-content scroll="false">
    <ion-scroll scrollY="true" style="width: 100% !important;height:30% !important"> 
        <ion-refresher (ionRefresh)="fill_data($event)">
          <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="{{ 'pull_to_refresh' | translate }}" refreshingSpinner="circles"
            refreshingText="{{ 'refreshing' | translate }}">
          </ion-refresher-content>
        </ion-refresher> 
        <ion-list>
          //data filling here
        </ion-list>
      </ion-scroll>
    </ion-content>

私を助けてください...

cordovaionic-frameworkionic2ionic3
6
Tony

これは私が今やった方法です-あなたと同じ問題@Tony

このSCSSを使用すると、リストがスクロールし、その下にアイテムを配置できます。

page-home {
  .scroll-content {
    overflow: hidden;
  }

  ion-list {
    overflow-y: auto;
    max-height: 72vh;
  }
}

ionic scrollと他のオプションを使用してみましたが、今のところどれも機能しないようです。

3
Evan Shortiss
.scroll-content {
    overflow-y: hidden !important;
}

これは私のために働いた

2
Zhang Bruce

ページのsassファイルで使用します。

.scroll-content {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
    display: block;
    overflow-x: unset;
    overflow-y: unset;
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
    contain: size style layout;
}
1
Alex

Safariを使用してios Ionicアプリをデバッグできますが、デバッグするとどちらが効率的であるかがわかります。

.scroll-content {
    overflow-y: hidden !important;                                          
}

イオンコンテンツのスクロールを無効にし、イオンリストのスクロールも無効にします。

div.scroll-content {
    bottom: 0px !important;                                                   
}

イオンコンテンツのスクロールを無効にする方が効率的です。イオン含有量だけでなくイオンリストも防止

0
Jin Kai

スクロールコンテンツ、スタイルを上書きする

scroll-content {
    overflow-y: auto;
}

私はあなたのためにその仕事を願っています

0
Nakul Kundaliya

解決しました。とても簡単です。

ion-content > div.scroll-content {
    overflow: hidden;
}

したがって、イオン含有量のみに適用されます。

0
ZhengYun Wang

「src\app\app.scss」で以下のスタイルコードを試してください

.scroll-content {
    overflow-y: auto !important;
}
0
OH3VCI
<ion-content>
   <ion-grid>
    <ion-row>
      <ion-col>
        <ion-scroll style="width:100%;height:100px" scrollY="true">
           <ion-list scroll="true">
          <ion-item *ngFor="let item of testData">
            <div>{{item}}</div>
          </ion-item>
        </ion-list>
        </ion-scroll>

      </ion-col>
    </ion-row>

  </ion-grid>
  <p>other data</p>
  <ion-list>
    <ion-item>
      1
    </ion-item>
      <ion-item>
      1
    </ion-item>
      <ion-item>
      1
    </ion-item>
  </ion-list>
</ion-content>

andin .tsファイル：

testData = [];

  constructor(public navCtrl: NavController) {
       for(let i =0;i<100;i++){
      this.testData.Push(i);
    }
  }

これをチェックしてください plunk

0
varun aaruru