在我的页面中添加离子清新组件后,我需要使用离子滑动组件制作3张幻灯片,当在页面的任何位置(中间,底部)向上拉时,离子复习器总是会被触发 .
有人可以帮助我让离子复习器只在页面顶部发射
这是我的代码
<ion-content>
<ion-refresher (ionRefresh)="doRefresh($event);">
<ion-refresher-content
pullingText="Pull to refresh"
pullingIcon="arrow-up"
refreshingSpinner="crescent">
</ion-refresher-content>
</ion-refresher>
<ion-slides>
<ion-slide>
<!--put long text-->
</ion-slide>
<ion-slide>
</ion-slide>
<ion-slide>
</ion-slide>
</ion-slides>
</ion-content>
有这个问题的解决方案吗?
3 回答
使用enabled标签启用和禁用离子刷新器 .
在HTML中,您需要使用ionSlideDidChange事件检查幻灯片的索引,如下所示:
在您的TS文件中,实现slideChanged方法以检查幻灯片的当前索引并启用/禁用如下所示的pullTorefresh字段,并且如果要使用幻灯片上的getActiveIndex(),则需要导入ViewChild组件并声明幻灯片作为ViewChild .
每张幻灯片都需要复习一次:
您将必须根据离子滑动scrollTop是否小于10来控制启用的离子复活 . 这样您将限制其启用状态,并且不会在离子滑块或离子内向上滚动触发 - 滚动和滚动位置将保留在每张幻灯片中 . 代码示例如下 -
在相应的* .ts文件中 -