时间戳

首页 > 解决方案 > 离子清新剂和固定元件

html - 离子清新剂和固定元件

问题描述

其他 div 后面的索引

我在索引所在的地方画了一条红线

所以我有一个固定的 div，但是使用我的离子刷新器，当我拉动刷新时，固定的 div 似乎是绝对的，我不知道如何解决这个问题。

这是我的代码

    .alphabetItem {
        
        color: #ffffff;
        font-size: 10px;
        position: fixed;
        z-index: 99999999;
        right: -4%;
        top : 200px;

    }
<ion-refresher (ionRefresh)="doRefresh($event)">
            <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="Tirer pour rafraîchir" refreshingSpinner="circles" refreshingText="Relâcher pour rafraîchir ...">
            </ion-refresher-content>
        </ion-refresher>
        
            <ion-col col-1 class="alphabetItem" scrollY="true" style="width:100%; height:100%">
                <div class="divLetter" *ngFor="let letter of alphabets" (click)="alphaScrollGoToList(letter)">
                    {{letter}}
                </div>
            </ion-col>

标签： htmlcssionic-framework

解决方案

尝试使用ion-toolbarIonic Framework ( https://ionicframework.com/docs/api/components/toolbar/Toolbar/ ) 中的组件。

<ion-header>
    <ion-toolbar>
        <!-- your fixed col -->
    </ion-toolbar>
</ion-header>
<ion-content>
    ...
    <!-- your content + refresher -->
    ...
</ion-content>

这ion-refresher是一个非常特殊的组件。不管你把它放在哪里，它都会放在最近的ion-content. 当您刷新时，它会向下移动您的滚动内容，您的固定容器所在的位置。<ion-toolbar>应该可以解决这个问题。

推荐阅读