Question

我以有角度的NativeScript为例，并试图使汽车列表水平滚动而不是垂直滚动。我已经删除了大多数给定的html，而只是为了使其余的html成为水平滚动列表。

我认为问题可能出在RadListView，但我不确定如何处理。到目前为止，我已经在所有地方尝试了“ direction =“ horizontal”，并且还更改了一些Layout类型。我还尝试过RadListView上的direction =“ 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>

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

Answer 1

您应该使用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>

将方向更改为“水平”是不会更改RadListView的滚动方向吗？

1 个答案: