Need to nest ListView inside ScrollView

#1

Hello,

I’m trying to do the following page design using NativeScript - Angular
The page has two areas, 1 - static info, 2 - Dynamic info
the dynamic info part is done using ListView
The whole page is wrapped in a ScrollView so the user can scroll down to see the dynamic area

The problem is: Listview’s scroll is not working inside the ScrollView, So i’m able to scroll down tot he dynamic area, but i cans scroll the dynamic area to see the full information.

Any tips on how to achieve this approach?

Thanks.

#2

ListView itself has scrollable content so if you have nest scrollable content it won’t function properly at least on Android.

You may keep the list view not scrollable by giving the height it wants to wrap it content so your parent scrollview can scroll all the time. Or use Android’s nested scroll view,

#3

Thank you so much, i have used this approach, and used ngFor to iterate over all items and display them

#4

ngFor doesn’t impact until you are not going to have a lot, may be 10s or 100s of items as it won’t reuse your view templates.

#5

Hi,
I would like to have some label- and other components above a ListView, lets say a Label text="TEST/. I have tried to add … This is not working. Do you know why and how I can add ? PS, I need a single ListView only. I tried everything but couldn’t find a way. Thx

In your example I tried in Playground:




<NestedScrollView *ngFor=“let i of numbers” class=“nested-scroll”>

<Label *ngFor=“let i of numbers” [text]="'Test ’ + i">




#6

Your template can not be dynamic when using ListView, hence ngFor will not work as expected here.