Блог

Я взял пример с деталями автомобиля для angular NativeScript, и я пытаюсь заставить список автомобилей прокручиваться горизонтально, а не вертикально. Я удалил большую часть данного html и просто стремлюсь создать список горизонтальной прокрутки с оставшимся html.

Я думаю, что проблема может быть в RadListView, но я не уверен, как с этим бороться. До сих пор я везде пробовал orientation=»horizontal», а также менял некоторые типы макетов. Я также пробовал orientation =»vertical» в RadListView, поскольку источник 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>