Question

在我的hybrid应用中，可以拖动屏幕刷新列表。在Android这可以正常工作，但在iOS上，当我向下拖动它时，有时会将其与滚动页面混淆，因此它具有溢出/弹跳效果。

在ionic中，您可以使用一个属性来禁用此功能，但它无效：

<ion-content id="questions" has-bouncing="false">

config.xml已经有这些代码行：

  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>

Answer 1

Ionic 2的解决方案：

<ion-content no-bounce>

Answer 2

您需要将overflow-scroll设置为false，如：

overflow-scroll="false"

适用于 Ionic 1.3

Answer 3

对于Ionic 4，使用：

<ion-content [scrollY]="false">...</ion-content>

Answer 4

overflow-scroll="false"也no-bounce或has-bouncing="false"生效..我正在尝试清洁离子项目ionic conference并将提到的属性应用于扬声器列表页面的离子内容。弹跳滚动未被禁用

cli包：（/ Users / lucky / Documents / projects / ionic-conference / node_modules）

@ionic/cli-utils  : 1.9.2
ionic (Ionic CLI) : 3.9.2

全球套餐：

Cordova CLI : 7.0.1

本地包裹：

@ionic/app-scripts : 2.1.4
Cordova Platforms  : android 6.2.3 ios 4.3.1
Ionic Framework    : ionic-angular 3.6.1

系统：

ios-deploy : 1.9.1 
ios-sim    : 6.0.0 
Node       : v6.9.5
npm        : 5.4.0 
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b

使用xcode模拟器iPhone 6 Plus进行测试

Answer 5

我正在使用ionic 1.3.2，以下内容对我有用：

  <preference name="webviewbounce" value="false" />
  <preference name="UIWebViewBounce" value="false" />
  <preference name="DisallowOverscroll" value="true" />

所有这一切都has-bouncing="false" ion-content。我没有进行彻底的测试来检查完成这项工作的最低要求。然而结果是：iOS和android没有反弹。

希望它有所帮助。

Answer 6

离子4 <ion-content no-bounce has-bouncing="false" forceOverscroll="false">上的

。如果此操作失败，则用消除反弹。

要在ios上删除并迫使组件离子含量中的不反弹，请创建文件DisableBounce.m 具有以下内容。

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

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

并保存在platform / ios / CordovaLib / Classes / Private / Plugins / CDVUIWebViewEngine上。这会禁用您应用中的所有效果反弹。

Answer 7

您可以使用

.scroll-content { -webkit-overflow-scrolling: auto !important; }

将其添加到scss文件中。

Answer 8

以下解决方案对我有用：仅测试了离子3.9版本

运行命令

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

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

Answer 9

我认为Leonardo Pineda的答案是正确的，但这不是直接更新到本机文件的好方法，我们应该选择创建自定义插件，该插件将在iOS上禁用反弹功能。

步骤1。从github repo（https://github.com/dtrmangesh/plugin-disable-ios-bouncing）克隆插件。

步骤2。将存储库路径添加到您的package.json

"dependencies": { BouncingIos : "git+<https://github.com/dtrmangesh/plugin-disable-ios-bouncing>"}

Answer 10

我正在从Ionic 3升级到Ionic 5并找到了这篇文章。但随后在文档中找到了解决方案。
我正在使用Ionic 5（不确定Ionic 4是否也可以使用）。只需将slot="fixed"添加到ion-conent内的元素中即可：

<ion-content
  [scrollEvents]="true"
  (ionScrollStart)="logScrollStart()"
  (ionScroll)="logScrolling($event)"
  (ionScrollEnd)="logScrollEnd()">
    <h1>Main Content</h1>

    <div slot="fixed">
      <h1>Fixed Content</h1>
    </div>
</ion-content>

在iOS中完美运行。
来源：https://ionicframework.com/docs/api/content

禁用内容弹跳滚动

10 个答案: