Question

我需要在Ionic中实现一个表或网格，当用户水平滚动时，左列保持固定，但是当垂直滚动时，它应该移动。第一行必须是相似的，但是它只能随着水平滚动而移动，并且在垂直滚动时保持固定。

Answer 1

对于固定有第一行的可滚动网格示例：

import { Component, ViewChild } from '@angular/core';
import { Content, Platform } from 'ionic-angular';

@Component({
    template: `
    <ion-header>
        <ion-navbar>
            <ion-title>Main Title</ion-title>
        </ion-navbar>

        <ion-toolbar mode="md" no-border-top>
            <ion-grid>
                <ion-row>
                    <ion-col col-2>Id</ion-col>
                    <ion-col col-2 text-right>Name</ion-col>
                </ion-row>
            </ion-grid>
        </ion-toolbar>
    </ion-header>

    <ion-content>
        <ion-grid>
            <ion-row *ngFor="let note of myData; let odd = odd" [ngClass]="{ 'table-background-row': odd}">
                <ion-col>
                    {{note?.id}}
                </ion-col>
                <ion-col>
                    {{note?.name}}
                </ion-col>
            </ion-row>
        </ion-grid>

        <ion-infinite-scroll>
            <ion-infinite-scroll-content></ion-infinite-scroll-content>
        </ion-infinite-scroll>
    </ion-content>
`})

class myPage {
    @ViewChild(Content) content: Content;

    myData: any;
    constructor(public platform: Platform, ) {
        this.toggleToolbar();
        this.myData = [{
            id: 1,
            name: "myName"
        },
        {
            id: 2,
            name: "yourName"
        }];
    });

    toggleToolbar() {
        this.content.resize();
    }
}

这可能对您有帮助：）

在Ionic 3中固定了顶部和左列的可滚动网格或表格

1 个答案: