Ionic 3 不正确的滚动行为

Question

很难描述这个问题，我不确定这是一个错误还是我只是误解了一些离子布局，而且我只在 ios 上测试过，所以不确定其他平台，所以我们开始吧：

我正在使用 ionic 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>