将方向更改为 'horizontal' 不会更改 RadListView 的滚动方向吗?
Changing orientation to 'horizontal' is not changing the scroll direction of RadListView?
我已经采用了 angular NativeScript 的汽车详细信息示例,我正在尝试使汽车列表水平滚动而不是垂直滚动。我已经删除了大部分给定的 html,我只是想用剩余的 html 制作一个水平滚动列表。
我认为问题可能出在 RadListView 上,但我不确定如何处理它。到目前为止,我已经在所有地方尝试了 orientation="horizontal" 并且还更改了一些布局类型。我还在 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>
目前,即使到处都是水平的,我得到一个垂直列表,其中每个项目都是汽车名称和汽车图片。但我希望每个下一个项目都向右而不是下方填充。
您应该使用 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>
我已经采用了 angular NativeScript 的汽车详细信息示例,我正在尝试使汽车列表水平滚动而不是垂直滚动。我已经删除了大部分给定的 html,我只是想用剩余的 html 制作一个水平滚动列表。
我认为问题可能出在 RadListView 上,但我不确定如何处理它。到目前为止,我已经在所有地方尝试了 orientation="horizontal" 并且还更改了一些布局类型。我还在 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>
目前,即使到处都是水平的,我得到一个垂直列表,其中每个项目都是汽车名称和汽车图片。但我希望每个下一个项目都向右而不是下方填充。
您应该使用 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>