WIX Studio ｜ 在Wix Studio Editor中使用Repeater创建复杂布局？

效果示例图

在Wix Studio Editor中，如果你想要创建一个复杂布局，其中Repeater项大小不同，且有些项目需要跨越整个宽度，而其他项目较小，可以通过结合使用Repeater和Grid布局来实现。以下是详细步骤和示例代码，帮助你实现这种布局：

方法一：使用A/B设计功能

如果A/B设计功能能够满足你的需求，可以直接使用这个功能。这种方法相对简单，适合快速实现。

方法二：使用Container和Grid布局

如果A/B设计功能无法满足你的需求，可以尝试在Repeater中放置一个Container，然后基于需要的布局设计该Container的Grid。

具体步骤如下：

1. 添加Repeater：

• 打开你的Wix网站，在页面中添加一个Repeater。

• 配置Repeater的基本布局和样式。

1. 在Repeater中添加Container：

• 在Repeater项中添加一个Container。

• 将这个Container设置为3列1行的Grid布局。

1. 编写代码实现数据渲染：

• 在Repeater的每个Container中，根据具体情况渲染1个或3个数据项。

• 确保Repeater项宽度为100%，并设置列间距为0px，使用外边距（margin）来调整项目之间的间距。

示例代码

以下是一个示例代码，帮助你理解如何实现这个逻辑：

 // 自定义索引，用于获取数据集
let customRepeaterIndex = 0;
// 所有Repeater项作为数组
const repeaterData = $w("Repeater").data;

$w("Repeater").onItemReady(($item, itemData, index) => {

  // 这个布尔值表示当前Repeater项是渲染1个还是3个数据项。第一个项将渲染一个，接下来渲染三个，依此类推。

  const isRenderOne = index % 2 === 0;

  if (isRenderOne) {

    // 在Grid容器中仅渲染一个数据项，并将索引加1

    $item("#container").children[0].text = repeaterData[customRepeaterIndex].title;

    customRepeaterIndex++;

  } else {

    // 获取当前和接下来的两个数据项作为数组

    const dataSet = [repeaterData[customRepeaterIndex], repeaterData[customRepeaterIndex + 1], repeaterData[customRepeaterIndex + 2]];

    dataSet.forEach((data, i) => {

      // 在Grid容器中分别渲染每个数据项

      $item(`#container`).children[i].text = data.title;

    });

    // 渲染三个数据项，并将索引加3

    customRepeaterIndex += 3;

  }

});