Question

我正在使用带有Header部分的ListView，如下所示，

<StackLayout>
  <StackLayout height="200">
    <Label text="Header content goes in this section"></Label>
  <StackLayout>
  <ListView [items]='posts'>
   <!-- template items goes here --> 
  </ListView>   
</StackLayout>

当我们滚动到列表时，标题在这种情况下是粘性的。是否有滚动覆盖标题的选项？。我的意思是标题也是滚动的一部分。

Answer 1

不确定是否有其他方法，但有一种方法可能是在列表视图中移动标题。为了使它工作，它需要在posts数组中，所以你可能想要将它转换为某种包含类，它可以包含标题或项目行。然后在列表视图中创建两个模板，这取决于模板键呈现标题或项目。

有关模板的详细信息，请参阅https://docs.nativescript.org/cookbook/ui/list-view#define-multiple-item-templates-and-an-item-template-selector-in-xml

Answer 2

Fr Angular-2应用程序您现在可以使用tkTemplateKey指定并创建自己的页眉，页脚，组和其他自定义列表视图元素。可以找到示例here

以下是带有标题和组的列表视图的代码。

<强> page.component.html

<ListView [items]="countries" [itemTemplateSelector]="templateSelector" (itemTap)="onItemTapFirstList($event)" class="list-group" separatorColor="white">
    <ng-template nsTemplateKey="header" let-header="item">
        <Label [text]="header.name" class="list-group-item h3 bg-primary" isUserInteractionEnabled="false" color="white" fontSize="24"></Label>
    </ng-template>
    <ng-template nsTemplateKey="footer" let-footer="item">
        <Label [text]="footer.name" class="list-group-item" backgroundColor="gray"></Label>
    </ng-template>
    <ng-template nsTemplateKey="cell" let-country="item">
        <StackLayout class="list-group-item">
            <Label [text]="country.name" class="list-group-item-heading"></Label>
            <Label [text]="country.desc" class="list-group-item-text" textWrap="true"></Label>
        </StackLayout>
    </ng-template>
</ListView>

<强> page.component.ts

@Component({
    moduleId: module.id,
    templateUrl: "./multi-line-grouped.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class MultiLineGroupedListViewExampleComponent implements OnInit {
    public countries: Array<any> = [];

    public templateSelector = (item: any, index: number, items: any) => {
        return item.type || "cell";
    }

    ngOnInit() {
        for (let i = 0; i < mockedCounties.length; i++) {
            this.countries.push(mockedCounties[i]);
        }
    }

    onItemTapFirstList(args: ItemEventData) {
        console.log(args.index);
    }
}

Answer 3

您可以使用* ngFor创建列表。这是执行此操作的示例代码。

 <ScrollView>
  <StackLayout>
  //define your header over here
  <Label text="hey header"></Label>
   <StackLayout *ngFor="let item of <Array>">
    <GridLayout columns="4*,*" rows="*,">
         <Label  row="0" col="0" text="hey label"></Label>
    </GridLayout>
   <StackLayout>
  <StackLayout>
 </ScollView>

带有标题和滚动整页的Nativescript Listview

3 个答案: