使用 header 的 Nativescript Listview 并滚动整个页面

Question

我正在使用 ListView，上面有 Header 部分，如下所示，

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

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

Answer 1

不确定是否有其他方法，但一种方法可能是将 header 移动到列表视图中。为此，它需要位于 posts 数组中，因此您可能希望将其转换为某种可以包含 header 或项目行的包装 class。然后在列表视图中创建两个模板，根据模板键呈现一个 header 或一个项目。

有关模板的详细信息，请参阅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 指令并创建您自己的 headers、页脚、组和其他自定义 list-view 元素。可以找到示例 here

这是带有 header 和组的 list-view 的代码。

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

您可以使用 *ng 来创建 list.Here 是执行此操作的示例代码。

 <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>

使用 header 的 Nativescript Listview 并滚动整个页面

Nativescript Listview with header and scroll entire page

nativescript

angular2-nativescript