为什么在 iOS 返回主视图时 ScrollView 会上下跳动?
Why is the ScrollView jumping up and down when returning to main view on iOS?
我正在使用带有 Angular 的 NativeScript 开发一个应用程序,运行 遇到了 ScrollView
元素的问题。简而言之,问题是我有一个带有项目列表的初始视图,如果我按其中一个项目转到详细视图并 return 到初始视图,滚动将跳转并创建一个顶部的间隙然后跳回,间隙消失。
这是问题的 GIF:
如您所见,当您 return 初始视图时,会产生一个间隙,我一直无法弄清楚为什么会这样。 ActionBar 以编程方式被禁用,我尝试将其完全删除或保持可见,但没有任何区别。
我使用的代码与 Angular 和 TypeScript 模板没有区别,可以使用以下命令安装:tns create MyApp --ng
或者也可以是 found on GitHub.
然后我所做的就是禁用 ActionBar 并将 items.component.html
更改为:
<GridLayout>
<ScrollView>
<StackLayout>
<StackLayout *ngFor="let item of items" [nsRouterLink]="['/item', item.id]">
<AbsoluteLayout style.backgroundColor="gray">
<FlexboxLayout left="15" top="110" flexDirection="column">
<Label [text]="item.id"></Label>
<Label [text]="item.name"></Label>
</FlexboxLayout>
</AbsoluteLayout>
</StackLayout>
</StackLayout>
</ScrollView>
</GridLayout>
我删除了所有不必要的样式,以便查明问题所在,罪魁祸首似乎是 AbsoluteLayout
元素。删除它会使问题消失,但我一直无法弄清楚为什么它首先会导致问题。我完全知道 ListView
元素的存在,但想使用完全自定义列表进行更多自定义。
至于我的编程环境,我 运行 在 NativeScript 版本 3.3.0 上 tns-core-modules
和 tns-ios
也在 3.3.0 上。一切都在实际的 iPhone 和 iOS 11.
上进行了测试
所以我的问题是:为什么会出现这个问题,如何解决?
我注意到 ScrollView
上方的 space 与 iOS 状态栏一样高,这让我相信这是一个 iOS 特定问题。此外,我在 GitHub 上发现了一个半透明状态栏的功能请求。建议的解决方案是在页面的controller中添加如下内容:
this._page.style.marginTop = -20;
这解决了我的 ScrollView
问题,同样的问题也可以通过添加高度为 20 的 StackLayout
作为视图中的第一个元素来解决,但这会破坏大多数用户界面.
我正在使用带有 Angular 的 NativeScript 开发一个应用程序,运行 遇到了 ScrollView
元素的问题。简而言之,问题是我有一个带有项目列表的初始视图,如果我按其中一个项目转到详细视图并 return 到初始视图,滚动将跳转并创建一个顶部的间隙然后跳回,间隙消失。
这是问题的 GIF:
如您所见,当您 return 初始视图时,会产生一个间隙,我一直无法弄清楚为什么会这样。 ActionBar 以编程方式被禁用,我尝试将其完全删除或保持可见,但没有任何区别。
我使用的代码与 Angular 和 TypeScript 模板没有区别,可以使用以下命令安装:tns create MyApp --ng
或者也可以是 found on GitHub.
然后我所做的就是禁用 ActionBar 并将 items.component.html
更改为:
<GridLayout>
<ScrollView>
<StackLayout>
<StackLayout *ngFor="let item of items" [nsRouterLink]="['/item', item.id]">
<AbsoluteLayout style.backgroundColor="gray">
<FlexboxLayout left="15" top="110" flexDirection="column">
<Label [text]="item.id"></Label>
<Label [text]="item.name"></Label>
</FlexboxLayout>
</AbsoluteLayout>
</StackLayout>
</StackLayout>
</ScrollView>
</GridLayout>
我删除了所有不必要的样式,以便查明问题所在,罪魁祸首似乎是 AbsoluteLayout
元素。删除它会使问题消失,但我一直无法弄清楚为什么它首先会导致问题。我完全知道 ListView
元素的存在,但想使用完全自定义列表进行更多自定义。
至于我的编程环境,我 运行 在 NativeScript 版本 3.3.0 上 tns-core-modules
和 tns-ios
也在 3.3.0 上。一切都在实际的 iPhone 和 iOS 11.
所以我的问题是:为什么会出现这个问题,如何解决?
我注意到 ScrollView
上方的 space 与 iOS 状态栏一样高,这让我相信这是一个 iOS 特定问题。此外,我在 GitHub 上发现了一个半透明状态栏的功能请求。建议的解决方案是在页面的controller中添加如下内容:
this._page.style.marginTop = -20;
这解决了我的 ScrollView
问题,同样的问题也可以通过添加高度为 20 的 StackLayout
作为视图中的第一个元素来解决,但这会破坏大多数用户界面.