首页 文章

ionic 3.2 - 如何禁用离子内容的滚动？

提问于
浏览 次
5

我正在开发Ionic 3.2版本的应用程序 . 我在离子滚动内部有一个离子复习器 . 我想禁用 ion-content 的滚动，并希望在滚动 ion-list 时在 ion-scroll 内显示 ion-refresher . 但它失败了 .

  • 我试过 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>

请帮我...

cordova ionic-framework ionic2 ionic3

7 回答

  • 1

    这就是我刚刚做到的 - 和@Tony一样的问题

    有了这个SCSS我的列表滚动，我可以在它下面有项目：

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

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

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

    回复于
  • 2
    .scroll-content {
    overflow-y: hidden !important;
}

    这对我有用

    回复于
  • 1

    在页面的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;
}
    回复于
  • 0

    覆盖滚动内容样式

    scroll-content {
    overflow-y: auto;
}

    我希望它为你工作

    回复于
  • 0
    <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

    在'src \ app \ app.scss'中尝试以下样式代码

    .scroll-content {
    overflow-y: auto !important;
}
    回复于
  • 0

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

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

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

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

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

    回复于

相关问题