Question

我正在开发Ionic 3.2版本的应用程序。我在离子卷轴内有一个离子复习器。我想禁用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"（就像在离子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>

请帮帮我......

Answer 1

这就是我刚刚做到的 - 和@Tony

一样的问题

使用此SCSS，我的列表会滚动，我可以在其下面有项目：

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

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

我尝试使用离子scroll和其他选项，但现在似乎都没有。

Answer 2

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

这对我有用

Answer 3

在..it页面的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;
}

Answer 4

覆盖滚动内容，样式

scroll-content {
    overflow-y: auto;
}

我希望它为你工作

Answer 5

<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

Answer 6

在'src \ app \ app.scss'

中尝试以下样式代码

<StackLayout>

    <Label Text="Welcome"
     VerticalOptions="Start"
     Margin="0,150,0,0"
     HorizontalTextAlignment="Center"
     Rotation="0"
     IsVisible="true"
     FontSize="20"
     TextColor="Black"></Label>


    <Picker x:Name="IndustryTypePicker1" Title="Select">
        <Picker.Items>
            <x:String>1</x:String>
            <x:String>2</x:String>
        </Picker.Items>
    </Picker>


</StackLayout>

Answer 7

您可以使用Safari调试ios Ionic应用程序，在调试时您可以注意哪些是有效的。

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

它将禁用离子内容的滚动并禁用离子列表的滚动。

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

禁用离子内容的滚动更有效。它只能阻止离子含量，但只能阻止离子列表

Answer 8

我已经解决了。非常简单。

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

因此它将仅适用于离子含量。

ionic 3.2 - 如何禁用离子含量的滚动？

8 个答案: