我在组件嵌入页面上实现了离子刷新器,如下所示。
[主页.page.html]
<ion-content [fullscreen]="true">
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<app-event-list></app-event-list>
</ion-content>
[主页.page.ts]
doRefresh(refresher) {
setTimeout(() => {
refresher.target.complete();
}, 2000);
}
[事件列表.component.html]
<ion-list>
<ion-item>
<ion-label>item1</ion-label>
</ion-item>
.
.
.
<ion-item>
<ion-label>item20</ion-label>
</ion-item>
</ion-list>
[事件列表.component.ts]
@Component({
selector: 'app-event-list',
templateUrl: './event-list.component.html',
styleUrls: ['./event-list.component.scss'],
})
export class EventListComponent {
我的离子信息是
Ionic:
Ionic CLI : 6.18.1 (/usr/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.0.4
@angular-devkit/build-angular : 13.0.4
@angular-devkit/schematics : 13.0.4
@angular/cli : 13.0.4
@ionic/angular-toolkit : 5.0.3
Cordova:
Cordova CLI : 10.0.0 (cordova-lib@10.1.0)
Cordova Platforms : android 10.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 8 other plugins)
Utility:
cordova-res : not installed globally
native-run : not installed globally
System:
Android SDK Tools : 26.1.1 (/opt/android-sdk-linux)
NodeJS : v14.16.1 (/usr/bin/node)
npm : 6.14.4
OS : Linux 5.10
只需将列表向上滚动一点即可调出离子清新剂微调器。理想的行为是滚动到顶部然后查看微调器。你如何获得理想的行为?