Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for ListView in ScrollView Nativescript Angular
Ilyoskhuja
Ilyoskhuja

Posted on

     

ListView in ScrollView Nativescript Angular

When you develop a mobile application with NativeScript Angular, you can stuck with some bugs with android or ios. In this article, we will solve the nested scrolling problem in android, if you found this article I am sure that you have some kind of scrolling problem with android.

If you have a main dashboard with ScrollView and you want to add inside ScrollView another ListView you can find that you cant scroll nested ListView. You can scroll only through parent ScrollView. Even if you followdocumentation using ListView in ScrollView you will have a problem with android.

From documentation:
"
_Important

Using the ListView component inside a ScrollView or ScrollView inside the ListView's items can lead to poor performance and can reflect the user experience. To avoid this issue, we should specify the height explicitly for the ListView in the scenario when the ListView is nested in ScrollView and the ScrollView's height - when the component is used inside the ListView._

<ScrollView>  <StackLayout>    <ListView height="150" [items]="countries"> ... </ListView>  </StackLayout></ScrollView>
Enter fullscreen modeExit fullscreen mode

"

For this situation in native Java Android you need to add the property nestedScrollingEnabled to true, like the image below:

Image description

If we can change property in Java, we can change it in Nativescript too. First, you need to import the ListView class from @nativescript/core like the code below:

import { ListView } from '@nativescript/core';
Enter fullscreen modeExit fullscreen mode

Then we will create a function to change properties like the code below:

onListView(e:EventData){//First check if is Android  if(isAndroid){//get object from EventData and convert it as ListView class object   const listView = e.object as ListView;   // and you can change property like that   listView.nativeView.setNestedScrollingEnabled(true);  }}
Enter fullscreen modeExit fullscreen mode

We need add "(loaded)" to html ListView like the code below:

<ListView  (loaded)="onListView($event)"  [items]="someArray">
Enter fullscreen modeExit fullscreen mode

Now you can check your nested scroll ListView.

If You find this article useful please write comment and push the like button.

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

  • Education
    University of Granada
  • Work
    Software engineer at Nipendo
  • Joined

More fromIlyoskhuja

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp