首页 文章

ActivityIndicator不显示外部stacklayout

提问于
浏览 次
-1

我有这个简单的页面布局：

<ActionBar title="Events" class="action-bar"></ActionBar>
<StackLayout class="page">
    <ListView [items]="events" class="list-group" [class.visible]="listLoaded" *ngIf="events">
        <ng-template let-item="item">
            <StackLayout class="list-group-item" (tap)="viewDetails(item)">
                <Label class="h3" [text]="item.nome"></Label>
            </StackLayout>
        </ng-template>
    </ListView>
    <ActivityIndicator [busy]="isLoading" [visibility]="isLoading ? 'visible' : 'collapse'" horizontalAlignment="center" verticalAlignment="center"></ActivityIndicator>
</StackLayout>

当组件加载数据时，活动指示符显示在页面顶部 . 现在我希望它出现在页面的中心，所以我从堆叠布局中弹出它

<ActionBar title="Events" class="action-bar"></ActionBar>
<ActivityIndicator [busy]="isLoading" [visibility]="isLoading ? 'visible' : 'collapse'" horizontalAlignment="center" verticalAlignment="center"></ActivityIndicator>

<StackLayout class="page">
    <ListView [items]="events" class="list-group" [class.visible]="listLoaded" *ngIf="events">
        <ng-template let-item="item">
            <StackLayout class="list-group-item" (tap)="viewDetails(item)">
                <Label class="h3" [text]="item.nome"></Label>
            </StackLayout>
        </ng-template>
    </ListView>
</StackLayout>

但它不再可见了！对于发生了什么的任何想法？

nativescript angular2-nativescript activity-indicator nativescript-telerik-ui nativescript-angular

2 回答

  • 0

    把它放在StackLayout中

    <StackLayout horizontalAlignment="center" [visibility]="isLoading ? 'visible' : 'collapse'" verticalAlignment="center">
    <ActivityIndicator [busy]="isLoading"></ActivityIndicator>
</StackLayout>
    回复于
  • 0

    好吧，这只是一个重叠的CSS问题 . page 类设置StackLayout的背景颜色属性，该属性始终与ActivityIndicator重叠，从而使其不可见 . 当然，有适当的方法来处理这种情况，并且甚至在 .page 元素内使ActivityIndicator可见并垂直居中

    回复于

相关问题