如何在Wix动态页面的list repeater中按分类创建子分组

方案1：单页多Repeater配置（适合分类数量固定场景） #

如果你的分类数量是预先确定的（比如示例中固定只有欧洲、南美等几个大洲分区），可以按以下步骤操作：

• 先在数据库中给所有条目新增一个分类字段（比如示例里的continent字段，存储对应大洲名称）
• 页面上每个分类对应添加1个文本组件（放分组标题）+1个Repeater组件（所有Repeater的单元格结构保持一致即可）
• 开启Velo开发者模式，在代码面板写入逻辑，页面加载时先拉取全量数据集，按分类字段过滤后分别赋值给对应分类的Repeater：

import wixData from 'wix-data';

$w.onReady(async function () {
  // 拉取全量数据，替换成你自己的数据库集合ID
  const allItemsRes = await wixData.query("你的数据库集合ID").find();
  const allItems = allItemsRes.items;
  
  // 按分类字段过滤得到各分组数据
  const europeItems = allItems.filter(item => item.continent === "Europe");
  const southAmericaItems = allItems.filter(item => item.continent === "South America");
  
  // 分别给对应Repeater赋值
  $w("#europeRepeater").data = europeItems;
  $w("#southAmericaRepeater").data = southAmericaItems;
  
  // 所有Repeater复用同一套单元格渲染逻辑
  const renderItem = ($item, itemData) => {
    $item("#countryNameText").text = itemData.name;
    // 其他字段的赋值逻辑按需求补充即可
  }
  $w("#europeRepeater").onItemReady(renderItem);
  $w("#southAmericaRepeater").onItemReady(renderItem);
  
  // 没有数据的分组直接隐藏标题和Repeater，避免空白占位
  if(europeItems.length === 0) {
    $w("#europeTitle, #europeRepeater").hide();
  }
  if(southAmericaItems.length === 0) {
    $w("#southAmericaTitle, #southAmericaRepeater").hide();
  }
})

方案2：嵌套Repeater动态生成（适合分类数量不固定场景） #

如果分类是动态变化、数量不固定的，用嵌套重复器的方案更灵活：

• 外层放一个主Repeater，每一个外层条目对应一个分组：内部包含1个分组标题文本组件 + 1个内层Repeater（用来放该分类下的所有子条目）
• 页面加载时先拉取全量数据，做聚合分组后生成外层Repeater需要的数据源：

import wixData from 'wix-data';

$w.onReady(async function () {
  // 拉取全量数据
  const allItemsRes = await wixData.query("你的数据库集合ID").find();
  const allItems = allItemsRes.items;
  
  // 按分类聚合数据
  const groupMap = {};
  allItems.forEach(item => {
    if(!groupMap[item.continent]) {
      groupMap[item.continent] = [];
    }
    groupMap[item.continent].push(item);
  })
  // 转换为外层Repeater适配的数组格式
  const outerData = Object.keys(groupMap).map(groupName => {
    return {
      _id: groupName, // 外层Repeater每个条目需要唯一_id
      groupTitle: groupName,
      children: groupMap[groupName]
    }
  })
  
  // 外层Repeater赋值和渲染逻辑
  $w("#outerRepeater").data = outerData;
  $w("#outerRepeater").onItemReady(($outerItem, outerData) => {
    // 渲染分组标题
    $outerItem("#groupTitleText").text = outerData.groupTitle;
    // 内层Repeater赋值和渲染逻辑
    const innerRepeater = $outerItem("#innerRepeater");
    innerRepeater.data = outerData.children;
    innerRepeater.onItemReady(($innerItem, innerData) => {
      $innerItem("#countryNameText").text = innerData.name;
      // 其他字段赋值按需求补充即可
    })
  })
})

注意事项 #

• 操作前先备份页面配置，避免代码调试过程中弄丢原有页面元素
• 如果不想直接用wixData拉取数据，也可以对接数据集组件，用$w("#你的数据集ID").getItems()方法获取全量数据即可
• 要是需要加分页、筛选功能，在拉取数据的query阶段添加对应的过滤、排序、分页参数即可。

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