预加载（附加前加载）页面和 CheckBox 样式

Question

如果可以的话，我会同时问两个问题：

如何在附加页面之前预加载它？例如，将第 1 页作为主页，将另一个第 2 页作为主页，每个页面都有自己的数据源。我怎样才能让所有的数据源/小部件都加载到第 2 页，而不是真正进入它？（我想这样做是因为某些页面在我的应用程序中并不常用，但是当您第一次访问它们时，您会遇到一个尴尬的等待加载数据源的过程）。
关于 CSS 复选框的样式。 App Maker 为我们提供了 'Slider' CheckboxStyle。如何设置该复选框内滑块的样式？我尝试查看各种 CSS 参考，当相应数据为真时无法将滑块颜色从蓝色更改为白色。

Answer 1

要回答您的第一个问题，您可以使用应用程序启动脚本预加载页面数据源。基本上加载程序需要暂停，然后加载数据源，最后恢复加载程序。为此，在您的应用中转到 设置 -> 应用设置 -> 应用启动脚本，并添加以下内容：

loader.suspendLoad();
app.datasources.MYDATASOURCEONE.load();
app.datasources.MYDATASOURCETWO.load(function(){
    loader.resumeLoad();
});

要回答您的第二个问题，您可能需要使用以下 CSS 或类似的东西来实现您的需要：

/* Changes the slider color when the value is false*/
.customCheckbox>input:not(checked){
  background-color: red; //apply color here
}

/* Changes the slider color when the value is true */
.customCheckbox>input:checked{
  background-color: blue
}

/* Changes the slider round button color when the value is false */
.customCheckbox>label:after{
  background-color: orange;
}

/* Changes the slider round button color when the value is true */
.customCheckbox>input:checked+label:after{
  background-color: green;
}

然后您所要做的就是将 customCheckbox 样式应用到属性编辑器中的小部件样式列表。

参考文献：
- https://developers.google.com/appmaker/settings#app_start
- https://developers.google.com/appmaker/ui/styles#extra_styles_with_the_styles_property

预加载（附加前加载）页面和 CheckBox 样式

Preloading (load before attach) pages and CheckBox styling

google-app-maker