水平 StackLayout 中的 ListView - Nativescript Vue

Question

我是使用 Vue 的 Nativescript 的新手，我正在尝试在水平方向的 StackLayout 中显示带有 ListView 的项目列表。

我期望的是，由于 StackLayout，ListView 将循环的三个元素将显示在同一行上。

相反，这三个元素显示在不同的行上。

看看这个游乐场：https://play.nativescript.org/?template=play-vue&id=cHwk9f

如何在同一行显示所有项目（作为按钮）？

感谢您的帮助！ :)

Answer 1

ListView目前不支持水平方向。

如果您仍然想要 ListView 行为，可以使用 RadListView，尤其是当您有很多要显示的项目时。

ns plugin add nativescript-ui-listview

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

更多相关信息here

如果您没有很多想要在 ListView 中显示的项目，您也可以选择 ScrollView 和 StackLayout:

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

水平 StackLayout 中的 ListView - Nativescript Vue

ListView in horizontal StackLayout - Nativescript Vue

listview

nativescript

nativescript-vue

stacklayout