多页面模式下Translation标签滚动加载卡顿问题技术问询

问题原因 #

在SurveyJS Creator 1.12.10版本中，当开启Translation标签页的多页面模式+**"仅显示已使用字符串"**筛选器时，无限滚动的总项数计算逻辑存在bug：组件错误地以筛选前的全量字符串数作为加载终止判断依据，而非筛选后的实际已使用字符串数量，导致滚动到中途就判定"已加载全部"，无法继续加载剩余项。

两种解决路径 #

路径1：修复无限滚动逻辑（补丁代码） #

针对1.12.10版本，可通过重写Translation模块的加载方法，修正总项数计算逻辑，让无限滚动正常工作：

// 补丁：修正已使用字符串筛选下的无限滚动计数错误
const originalLoadMore = surveyCreator.translation._loadMoreItems;
surveyCreator.translation._loadMoreItems = function() {
  if (this.isUsedStringsOnly) {
    // 获取筛选后实际已使用的字符串总数
    const actualUsedCount = Object.keys(this.getUsedStrings()).length;
    // 仅当已加载项数小于实际总数时，触发加载更多
    if (this.visibleItems.length < actualUsedCount) {
      return originalLoadMore.call(this);
    }
    return false;
  }
  // 非筛选模式下沿用原有逻辑
  return originalLoadMore.call(this);
};

路径2：禁用无限滚动，直接加载所有项 #

如果不需要无限滚动功能，可直接禁用并强制加载所有已使用字符串，适合中小型数据集场景：

// 初始化Creator时禁用无限滚动
const creator = new SurveyCreator.SurveyCreator({
  translation: {
    infiniteScroll: false
  }
});

// 若已初始化，可动态修改配置
surveyCreator.translation.options.infiniteScroll = false;
// 启用筛选后手动加载全部项
surveyCreator.translation.isUsedStringsOnly = true;
surveyCreator.translation.loadAllItems();

大型数据集优化建议 #

1. 升级至最新稳定版：该bug在1.13.x及以后的版本中已被官方修复，升级是最彻底的解决方式。
2. 替换为虚拟滚动：若无法升级，可自定义集成虚拟滚动组件，仅渲染可视区域内的翻译项，大幅提升大型数据集的滚动流畅度。
3. 前置筛选逻辑：将"仅显示已使用字符串"的筛选逻辑移至后端处理，减少前端需要处理的数据量，从根源优化性能。

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