首页 > 解决方案 > 在数据库中找不到数据时如何折叠图库和剥离

问题描述

我正在使用下面的代码,并希望在数据集中没有内容时折叠元素。现在,如果有一个元素不在数据集中,它会在页面底部创建一个大的空白区域。

当前代码:

$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

任何帮助深表感谢!

标签: javascriptvelo

解决方案


查看Velo 论坛上的此评论以获取解释。

基本上,您需要确保您的页脚紧贴页面上的最后一个元素。如果需要:

  1. 使用 Ctrl + X 剪切图库元素(适用于 Windows)
  2. 拉起页脚的把手并将其粘贴到页面上的最后一个元素(在画廊被移除后)
  3. Ctrl + V(适用于 Windows)重新引入图库元素,并确保这次不会通过手动向下拉页脚手柄在图库和页脚之间创建间隙

提示 1:引入透明框以确保所有元素彼此堆叠(粘在一起)以避免此问题

提示 2:默认情况下不要用图像填充您的画廊,让画廊保持空白


推荐阅读