javascript - 在数据库中找不到数据时如何折叠图库和剥离
问题描述
我正在使用下面的代码,并希望在数据集中没有内容时折叠元素。现在,如果有一个元素不在数据集中,它会在页面底部创建一个大的空白区域。
当前代码:
$w.onReady(() => {
$w("#dynamicDataset").onReady(() => {
// Gets the current item properties and stores them in a variable called item
const item = $w("#dynamicDataset").getCurrentItem();
if (!item.gallery){
$w("#gallery1").collapse()
} else {
$w("#gallery1").expand()
}
if (!item.mainImage2){
$w("#gallery2").collapse()
} else {
$w("#gallery2").expand()
}
if (!item.stripImageLeft){
$w("#columnStrip13").collapse()
} else {
$w("#columnStrip13").expand()
}
if (!item.processGallery){
$w("#gallery3").collapse()
} else {
$w("#gallery3").expand()
}
if (!item.processGallery){
$w("#columnStrip12").collapse()
} else {
$w("#gallery3").expand()
}
if (!item.videoUrl){
$w("#videoPlayer1").collapse()
} else {
$w("#videoPlayer1").expand()
}
});
});
这是一个填充了所有元素的示例,它看起来很棒。 示例 1
这是一个底部所有空白区域的示例: 示例 2
任何帮助深表感谢!
解决方案
查看Velo 论坛上的此评论以获取解释。
基本上,您需要确保您的页脚紧贴页面上的最后一个元素。如果需要:
- 使用 Ctrl + X 剪切图库元素(适用于 Windows)
- 拉起页脚的把手并将其粘贴到页面上的最后一个元素(在画廊被移除后)
- Ctrl + V(适用于 Windows)重新引入图库元素,并确保这次不会通过手动向下拉页脚手柄在图库和页脚之间创建间隙
提示 1:引入透明框以确保所有元素彼此堆叠(粘在一起)以避免此问题
提示 2:默认情况下不要用图像填充您的画廊,让画廊保持空白
推荐阅读
- c# - c# - 如何在按钮单击wpf c# sql时从数据库中删除行
- microsoft-graph-api - 通过 Graph API 监控 Microsoft Teams 中正在进行的会议
- reactjs - 道具更新时更新组件
- java - MaterialContainerTransform 过渡不适用于返回
- java - Java faces-config 如何检查未使用的导航规则?
- c# - 如何检查搜索文本包含在任何字段中
- tensorflow - 训练期间 642% 的 CPU 与 GPU 一起使用。正常吗?
- string - 选择一个选项并赋值
- flutter - 如何在 Flutter 中滚动浏览固定列表并循环它?
- python - 您可以设置 Black 以使其不将 ... 语句放在换行符上吗?