离子3不正确的滚动行为

Question

很难描述这个问题，我不确定它是否是一个错误，或者我只是误解了一些离子布局，我也只是在ios上测试过，所以不确定其他平台，所以我们在这里：

我正在使用离子3.19，ios 11.2

如果<ionic-content>中的内容比屏幕更大（垂直），那么如果我向上滚动（导致过度滚动）或向下滚动（也导致过度滚动）只是在我停止触摸它的那一刻 - 内容跳转到最重要的是，它很难描述，这里是重现的方法：启动新的离子选项卡项目。将15个左右的<ion-card>添加一些文字添加到任何标签中，例如home.html如下所示：

    <ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card>
    <ion-card-header>Header</ion-card-header>
    <ion-card-content>Body</ion-card-content>
  </ion-card>
  <ion-card>
    <ion-card-header>Header</ion-card-header>
    <ion-card-content>Body</ion-card-content>
  </ion-card>
  <ion-card>
    <ion-card-header>Header</ion-card-header>
    <ion-card-content>Body</ion-card-content>
  </ion-card>
  <ion-card>
    <ion-card-header>Header</ion-card-header>
    <ion-card-content>Body</ion-card-content>
  </ion-card>
  <ion-card>
    <ion-card-header>Header</ion-card-header>
    <ion-card-content>Body</ion-card-content>
  </ion-card>
  <ion-card>
    <ion-card-header>Header</ion-card-header>
    <ion-card-content>Body</ion-card-content>
  </ion-card>
  <ion-card>
    <ion-card-header>Header</ion-card-header>
    <ion-card-content>Body</ion-card-content>
  </ion-card>
</ion-content>

（只是为了确保内容大于屏幕），在iphone（ionic cordova start ios --device）上运行，向下滚动一点，然后快速向上滚动并将手指从屏幕上移开还在向上滚动

有人遇到过这个吗？我现在已经打了好几天了，起初我认为它与我的风格有关，但它可以用纯离子特征再现

我只使用了启动离子选项卡项目，只更改了home.html，所有scss都处于初始离子状态

Answer 1

尝试用<ion-list></ion-list>

包装商品

<ion-content padding>
    <ion-list>
        Your cards here...
    </ion-list>
</ion-content>

Answer 2

看来您是一个独特的问题。

我正在尝试产生与您的问题相同的问题，但是我不能。 无论如何，您可以尝试将其添加到index.html

  <ion-app style="z-index: 1"></ion-app>

Answer 3

以下解决方案对我有用：

步骤：

1. ionic cordova平台添加ios && ionic cordova准备ios
2. 然后在/ platforms / ios // Plugins / cordova-plugin-ionic-webview /
中找到CDVWKWebViewEngine.m
3. 将此代码行放在行的底部并保存。

@implementation UIScrollView (NoBounce)
- (void)didMoveToWindow {
   [super didMoveToWindow];
   self.bounces = NO;
}
@end

Answer 4

将no-bounce属性添加到您的<ion-content>元素

<ion-content no-bounce padding>
   <ion-card>
      <ion-card-header>Header</ion-card-header>
      <ion-card-content>Body</ion-card-content>
   </ion-card>
</ion-content>