ListView in horizontal StackLayout - Nativescript Vue

1
votes

I'm new on Nativescript with Vue and I'm trying to display a list of items with ListView in a StackLayout with horizontal orientation.

What I expect is that the three elements that the ListView will cycle, will be showed on the same line thanks to the StackLayout.

Instead, the three elements are displayed on separate lines.

See this playground: https://play.nativescript.org/?template=play-vue&id=cHwk9f

How can i display all the items on the same line (as buttons)?

Thank you for the help! :)

1
listviewnativescriptnativescript-vuestacklayout

1 Answers

2
votes

ListView currently don't support horizontal orientation.

You could use RadListView if you still want a ListView behavior, especially if you have a lot of items that you want to display.

ns plugin add nativescript-ui-listview

 <RadListView scrollOrientation="horizontal>
  ...
</RadListView>

More on that here

If you don't have a lot of items that you want to display inside the ListView, you could alternatively go for a ScrollView and a StackLayout:

<ScrollView orientation="horizontal">
  <StackLayout orientation="horizontal">
     <!-- your item templates goes here maybe in a v-for -->
  </StackLayout>
</ScrollView>