带有内部内容的tkGroupTemplate的RadListView水平滚动

时间:2019-09-22 01:16:04

标签: nativescript angular2-nativescript nativescript-angular nativescript-plugin

告诉我们有关问题

由于所有内容都是水平的,因此我试图水平设置与的功能分组在一起的内容,但是不可能。

您的问题在哪个平台上发生?

两者

请告诉我们如何尽可能详细地重新创建问题。

<RadListView
    [items]="dataItems"
    #productsListView
    [groupingFunction]="grouping"
>
    <ng-template tkListItemTemplate let-item="item">
        <StackLayout orientation="horizontal" width="100%">
            <MDCardView width="100" height="100">
                <Image stretch="aspectFill" [src]="item.image"></Image>
            </MDCardView>
        </StackLayout>
    </ng-template>

    <ng-template tkGroupTemplate let-category="category">
        <GridLayout columns="*, auto" ios:height="50">
            <Label
                col="0"
                style="font-weight: bold; font-size: 24"
                [text]="category"
            ></Label>
            <Label
                col="1"
                style="font-size: 12; color: gray;"
                text="Ver más"
            ></Label>
        </GridLayout>
    </ng-template>

    <ListViewGridLayout
        tkListViewLayout
        itemHeight="100"
        scrollDirection="Horizontal"
    ></ListViewGridLayout>
</RadListView>

1 个答案:

答案 0 :(得分:0)

tkGroupTemplate内尝试ScrollView

<ng-template tkGroupTemplate let-category="category">
    <GridLayout>
        <ScrollView orientation="horizontal" scrollBarIndicatorVisible="false">
            <Label class="m-5 h2" [text]="category"></Label>
        </ScrollView>
    </GridLayout>
</ng-template>

Playground Sample