首页 文章

带有 Headers 和滚动整页的Nativescript Listview

提问于
浏览 次
1

我正在使用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>

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

nativescript angular2-nativescript

3 回答

  • 0

    您可以使用* 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>
    回复于
  • 0

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

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

    回复于
  • 0

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

    以下是带有 Headers 和组的列表视图的代码 .

    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);
    }
}
    回复于

相关问题