1

我已经为 angular NativeScript 采用了汽车详细信息示例，并且我正在尝试使汽车列表水平滚动而不是垂直滚动。我已经删除了大部分给定的 html，只是想用剩余的 html 制作一个水平滚动列表。

我认为问题可能是 RadListView，但我不知道如何处理它。到目前为止，我到处都尝试了orientation="horizo​​ntal"，并且还更改了一些布局类型。我还在 RadListView 上尝试了orientation="vertical"，因为NativeScipt 消息来源说这会起作用......我对Nativescript 很陌生，所以我希望这是一个简单的修复，因为我没有找到任何东西那会有所帮助。

这是我项目的 html 部分。整个东西被封装在一个水平方向的 StackLayout 中。如果您想看其他东西，请告诉我：

<RadListView orientation="horizontal" [items]="cars" (itemTap)="onCarItemTap($event)" >

    <ng-template tkListItemTemplate let-car="item" >

            <StackLayout orientation="horizontal">

                    <GridLayout rows="*, *, *" columns="*, *"  backgroundColor="purple">
                        <Label [text]="car.name" class="text-primary font-weight-bold"></Label>

                        <Image row="2" [src]="car.imageUrl" stretch="aspectFill" height="120" class="m-r-20"></Image>
                    </GridLayout>

            </StackLayout>

    </ng-template>

</RadListView>

<ActivityIndicator [busy]="Loading"></ActivityIndicator>

目前，即使到处都是水平的，我得到一个垂直列表，其中每个项目都是汽车名称和汽车图片。但我希望下一个项目向右而不是向下填充。

4

1 回答 1

4

您应该使用ListViewLinearLayout并将其设置scrollDirection为Horizontal.

<RadListView orientation="horizontal" [items]="cars" (itemTap)="onCarItemTap($event)" >

    <ListViewLinearLayout tkListViewLayout scrollDirection="Horizontal"></ListViewLinearLayout>

    <ng-template tkListItemTemplate let-car="item" >

            <StackLayout orientation="horizontal">

                    <GridLayout rows="*, *, *" columns="*, *"  backgroundColor="purple">
                        <Label [text]="car.name" class="text-primary font-weight-bold"></Label>

                        <Image row="2" [src]="car.imageUrl" stretch="aspectFill" height="120" class="m-r-20"></Image>
                    </GridLayout>

            </StackLayout>

    </ng-template>

</RadListView>

<ActivityIndicator [busy]="Loading"></ActivityIndicator>
于 2019-04-09T09:15:40.973 回答