问题表现:当页面滚动在最顶端时,页面下拉,系统会卡住3秒,期间无法点击;当页面滚动在最低端时,页面上拉,系统会卡住3秒,期间无法点击。
解决思路,让页面高度最低为100vh + 3px; 然后 让页面的scrollTop永远不要处在0 或者最低端
css: 给容器一个最低高度 min-height: calc(100vh + 3px);
html: <ion-content [scrollEvents]="true" (ionScrollEnd)="logScrollEnd()" #content></ion-content>
ts:
// ts里面
@ViewChild('content') content: any; // 也可以 在构造函数里面注入进来
isWebAndIos: boolean; // 判断平台是否是ios平台
constructor(private platform: Platform) {
this.isWebAndIos = this.platform.is('mobileweb') && this.platform.is('ios');
}
// 滚动结束
logScrollEnd() {
// 如果是ios平台 执行
if (this.isWebAndIos) {
// 滚动结束后执行 ionic4 content提供的钩子函数
this.content.getScrollElement().then(res => {
// 滚到了最高点
if (res.scrollTop === 0) {
this.content.scrollByPoint(0, 1, 0);
}
// 滚动到了最低点
if (res.scrollTop + res.clientHeight === res.scrollHeight) {
this.content.scrollByPoint(0, -1, 0);
}
});
}
}
// 页面初始化时就需要滚动下屏幕
ngOnInit() {
this.content.scrollByPoint(0, 1, 0);
}
依旧存在的问题:此种方案优化后,卡死的频率大幅降级,但偶尔依旧会被触发,但是基本不影响使用体验了。
优化:不可能每一个页面都这么处理,我们需要把他写出一个指令,或封装一个成一个组件。