离子幻灯片显示在离子 5 的下方
ion-slides showing below the content ionic 5
我在这里使用 Ionic 5,我注意到当我在 ion-slide 1 的列表中有许多项目,而在下一个 ion-slide 中有一些项目时,当我在两者之间转换时这两个以编程方式,项目较少的幻灯片开始低于它所包含的实际内容。
这就像幻灯片在过渡期间共享一个 Y 滚动位置。
幻灯片,其中两个,填充了嵌套在离子列表中的一些离子项目(和滑动项目),它们通过与离子段按钮的交互“滑动”。
有没有办法快速滚动到下一张幻灯片的顶部,以便在转换过程中不会注意到它,或者,我需要添加一些其他代码来阻止幻灯片 2 从幻灯片的 Y 点开始1 个转换来自..
编辑:github 代码的 repo,滚动到长列表的底部,然后单击 Group2,下一张幻灯片从与上一张相同的 Y 点开始。
https://github.com/p4u1d34n/ionicEmpty
<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,1,2,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>
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'
}); -->
});
}
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ionic App</title>
<base href="/" />
<meta name="color-scheme" content="light dark" />
<meta name="viewport"
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<link rel="icon" type="image/png" href="assets/icon/favicon.png" />
<script type="text/javascript" src="assets/js/cdlutils.js"></script>
<script type="text/javascript" src="assets/js/cdl-utils-ui.js"></script>
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
<app-root></app-root>
</body>
</html>
我需要添加这些位..
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)
});
}
我在这里使用 Ionic 5,我注意到当我在 ion-slide 1 的列表中有许多项目,而在下一个 ion-slide 中有一些项目时,当我在两者之间转换时这两个以编程方式,项目较少的幻灯片开始低于它所包含的实际内容。
这就像幻灯片在过渡期间共享一个 Y 滚动位置。
幻灯片,其中两个,填充了嵌套在离子列表中的一些离子项目(和滑动项目),它们通过与离子段按钮的交互“滑动”。
有没有办法快速滚动到下一张幻灯片的顶部,以便在转换过程中不会注意到它,或者,我需要添加一些其他代码来阻止幻灯片 2 从幻灯片的 Y 点开始1 个转换来自..
编辑:github 代码的 repo,滚动到长列表的底部,然后单击 Group2,下一张幻灯片从与上一张相同的 Y 点开始。
https://github.com/p4u1d34n/ionicEmpty
<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,1,2,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>
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'
}); -->
});
}
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ionic App</title>
<base href="/" />
<meta name="color-scheme" content="light dark" />
<meta name="viewport"
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<link rel="icon" type="image/png" href="assets/icon/favicon.png" />
<script type="text/javascript" src="assets/js/cdlutils.js"></script>
<script type="text/javascript" src="assets/js/cdl-utils-ui.js"></script>
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
<app-root></app-root>
</body>
</html>
我需要添加这些位..
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)
});
}