离子幻灯片显示在内容离子 5 下方

问题描述

我在这里使用 Ionic 5，我注意到当我在 ion-slide 1 的幻灯片中的列表中有许多项目，而下一个 ion-slide 中有一些项目时，当我在两者之间转换时以编程方式，项目较少的幻灯片在其实际内容下方开始。

这就像幻灯片在过渡期间共享一个 Y 滚动位置。

幻灯片，其中两个，填充了一些嵌套在离子列表中的离子项（和滑动项），它们通过与离子段按钮的交互而“滑动”。

有没有办法快速滚动到下一张幻灯片的顶部，以便在转换过程中不会注意到它，或者，我需要添加一些其他代码巫毒来阻止幻灯片 2 从幻灯片 1 转换的 Y 点开始来自..

编辑：运行中代码的 github 存储库，滚动到长列表的底部，然后单击 Group2，下一张幻灯片从与上一张相同的 Y 点开始。

https://github.com/p4u1d34n/ionicEmpty

a = pd.DataFrame(b)

a.round(2)

<ion-slides #slider class="swiper-no-swiping">

    <ion-slide>
        <ion-list>
            <ion-item-sliding *ngFor="let item of [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]; let i = index">
                <ion-item (click)="doSomething(item)">
                    <ion-avatar slot="start">
                        <img src="image.png">
                    </ion-avatar>
                    <ion-label>
                        <h2>Title for item</h2>
                        <h3>Another line here</h3>
                        <p class="ion-text-wrap">
                            Some random stuff here
                        </p>
                    </ion-label>
                </ion-item>
                <ion-item-options side="end">
                    <ion-item-option color="danger" (click)="removeAction(item)">
                        Remove
                    </ion-item-option>
                </ion-item-options>
            </ion-item-sliding>
        </ion-list>
    </ion-slide>

    <ion-slide>
        <ion-list>
            <ion-item-sliding *ngFor="let item of [0,3]; let i = index">
                <ion-item (click)="doSomething(item)">
                    <ion-avatar slot="start">
                        <img src="image.png">
                    </ion-avatar>
                    <ion-label>
                        <h2>Title for different item</h2>
                        <h3>Another line here</h3>
                        <p class="ion-text-wrap">
                            Some random stuff here
                        </p>
                    </ion-label>
                </ion-item>
                <ion-item-options side="end">
                    <ion-item-option color="danger" (click)="removeAction(item)">
                        Remove
                    </ion-item-option>
                </ion-item-options>
            </ion-item-sliding>
        </ion-list>
    </ion-slide>

<ion-slides>

<ion-segment (ionChange)="changeSegment($event)" [value]="this.sliderindex">
    <ion-segment-button *ngFor="let seg of this.sliderindex" [value]="seg">
        <ion-label>{{seg}}</ion-label>
    </ion-segment-button>
</ion-segment>

索引.html

declare var window;

@ViewChild('slider',{static:false}) slider:IonSlides;

private view: any;
public sliderindex:any = ['Group1','Group2'];

changeSegment(ev: any) {
        
    this.view = this.sliderindex.indexOf(ev.detail.value);
    this.slider.slideto(this.view,250).then(()=>{

      <!-- Trying to get experimental here...  -->
      <!--   window.scrollTo({
        top: 0,left: 0,behavior: 'smooth'
        }); -->

    });
}

解决方法

我需要添加这些位..

import { IonContent } from '@ionic/angular';

@ViewChild(IonContent) content: IonContent;

并将函数更改为此

changeSegment(ev: any) {
    this.view = this.sliderindex.indexOf(ev.detail.value);
    this.slider.slideTo(this.view,250).then(()=>{
      this.content.scrollToTop(0)
    });
}