使用Ionic-3开发混合应用时滚动导致内容隐藏的问题求助

嘿，我之前在Ionic 3开发混合应用时也碰到过一模一样的问题——滚动页面时单选框、复选框会突然消失，点击空白区域又会重新显示。这大概率是Ionic的硬件加速渲染或者视图更新机制导致的，给你几个亲测有效的解决方案：

1. 禁用目标元素的硬件加速 #

有时候硬件加速会让滚动时的元素渲染延迟，我们可以通过CSS强制关闭相关元素的硬件加速：

/* 给ion-content全局设置 */
ion-content {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* 或者针对单选/复选框的容器 */
.radio-group, .checkbox-group {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

2. 滚动时手动触发视图更新 #

Angular的变化检测有时候会在滚动时“偷懒”，我们可以监听滚动事件，强制触发视图更新：
首先在HTML的ion-content上绑定滚动事件：

<ion-content (ionScroll)="handleScroll()">
  <!-- 你的表单内容 -->
</ion-content>

然后在页面的TypeScript文件里注入ChangeDetectorRef并实现方法：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdRef: ChangeDetectorRef) {}

handleScroll() {
  // 滚动过程中强制检测组件变化，确保控件渲染
  this.cdRef.detectChanges();
}

3. 调整Ionic的滚动辅助配置 #

Ionic自带的滚动辅助功能可能会干扰表单控件的渲染，我们可以全局或局部关闭这些功能：

全局配置（app.module.ts） #

imports: [
  IonicModule.forRoot(MyApp, {
    scrollAssist: false,
    autoFocusAssist: false
  })
]

局部配置（页面HTML） #

<ion-content forceOverscroll="false">
  <!-- 你的内容 -->
</ion-content>

4. 检查自定义样式冲突 #

看看你自定义的custom_headerz或者其他样式有没有设置overflow: hidden、z-index这类属性，可能导致控件被意外遮挡。可以给单选/复选框设置更高的层级：

.radio-button, .checkbox {
  z-index: 999;
  position: relative;
}

额外小技巧：使用Ionic原生列表组件包裹控件 #

把单选框、复选框放到ion-list和ion-item里，Ionic的原生组件对滚动渲染的兼容性更好，能减少这类问题：

<ion-list>
  <ion-item>
    <ion-label>选项A</ion-label>
    <ion-radio value="A"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>选项B</ion-label>
    <ion-checkbox></ion-checkbox>
  </ion-item>
</ion-list>

你可以逐个试试这些方法，一般第一个或者第二个就能解决问题啦！

内容的提问来源于stack exchange，提问作者Sandip Moradiya