Nativescriptリストビュー、私は以下のようにその上にヘッダー部分とリストビューを使用していますページ全体

Question

ヘッダを持つとスクロールが、この場合はスティッキーです。 スクロールオーバーライドヘッダーもオプションですか？つまり、そのヘッダーもスクロールの一部です。

Answer 1

Frの角度-2のアプリケーションを参照してください。 例が見つかりましたhere

ここには、ヘッダーとグループを含むリストビューのコードがあります。あなたが使用することができます

page.component.html

<ListView [items]="countries" [itemTemplateSelector]="templateSelector" (itemTap)="onItemTapFirstList($event)" class="list-group" separatorColor="white"> 
    <template nsTemplateKey="header" let-header="item"> 
     <Label [text]="header.name" class="list-group-item h3 bg-primary" isUserInteractionEnabled="false" color="white" fontSize="24"></Label> 
    </template> 
    <template nsTemplateKey="footer" let-footer="item"> 
     <Label [text]="footer.name" class="list-group-item" backgroundColor="gray"></Label> 
    </template> 
    <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> 
    </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 2

別の方法があるかどうかはわかりませんが、リストビュー内でヘッダーを移動する方法があります。それがうまくいくためには、配列Array内にある必要があります。そのため、ヘッダーまたは項目行を含むことができる何らかの種類のラッピングクラスに変換する必要があります。次に、テンプレートビューのキーに応じてヘッダーまたはアイテムをレンダリングする2つのテンプレートをリストビュー内に作成します。テンプレートの詳細については

、あなたが今tkTemplateKeyのdeirectiveを使用して、独自のヘッダー、フッター、グループおよびその他のカスタムリストビューの要素を作成することができますhttps://docs.nativescript.org/cookbook/ui/list-view#define-multiple-item-templates-and-an-item-template-selector-in-xml

Answer 3

* list.Hereを作成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>