Nativescript Listview 带有标题和滚动整个页面答案

【问题标题】：Nativescript Listview with header and scroll entire pageNativescript Listview 带有标题和滚动整个页面
【发布时间】：2017-07-03 17:29:23
【问题描述】：

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

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

【问题讨论】：

尝试使用 Scrollview 而不是最顶层的 StackLayout

标签： nativescript angular2-nativescript

【解决方案1】：

在 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);
    }
}

【讨论】：

得到只支持 ng-template 而不是模板的错误！
^^^ 你是对的！我已经更新了 sn-p 以使用 ng-template，因为这是现在在 Angular 中执行此操作的方式

【解决方案2】：

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

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

【讨论】：

模板功能在 {N}（不是 Angular）中相对较新吗？以前从未见过。我正在使用 RadListView - 这种语法在 RLV 中是否有效？我在 RLV 中没有做任何花哨的事情 - 有什么理由不使用基本的 {N} ListView（即通过 RLV）？
从 2.4 开始。如果您不需要添加糖，您可以使用基本 LV。

【解决方案3】：

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

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

【讨论】：

这个效率很低。