Horizontal Scrolling Listview (or ScrollView)


#1

Hello guys!

I’m new with this, but I’m trying to make a ListView with Custom components inside, but I want to scroll horizontally. How can I do that?

Thanks in advance


#2

The default ListView doesn’t support horizontal layout, but RadListView does.

For ScrollView, simply set orientation to horizontal.


#3

Thanks for your reply.

But, how can I use v-for inside ScrollView? it’s the same as ListView?

I mean, how can I do something like this for ScrollView?

<ListView for="todo in todos" @itemTap="onItemTap">
	<v-template>
	   <GridLayout columns="*, auto">
		<CustomComponent :name="todo.name"/>
	  </GridLayout>
	</v-template>
</ListView>

#4

You may read about ListView in the official docs, ListView reuses templates and best for performance when you have a long list of items.

For ScrollView, place a horizontal StackLayout inside and do a for and add your items.


#5

This is how I resolve this:

<ScrollView  orientation="horizontal">
	<StackLayout  @itemTap="onItemTap" orientation="horizontal">
		<CustomItem v-for="todo in todos" :key="todo.id"/>
	</StackLayout>
</ScrollView>

I hope that this help someone. :slight_smile: