如何适配移动端屏幕实现文本分页？基于指定JS幻灯片脚本的需求

我来帮你搞定这个移动端幻灯片的文本自动分页问题，结合你提到的横向滑动、电子书式排列的需求，我们可以通过以下步骤实现：

1. 核心：文本自动分页函数 #

首先需要一个能智能拆分长文本的函数，它会基于移动端屏幕高度，把$HtmlText里的内容（包括特殊公式等元素）完整分配到多个article容器中，避免截断完整元素：

function splitTextToPages(rawHtml, baseContainerSelector, pageHeight) {
  const $baseContainer = $(baseContainerSelector);
  // 创建临时容器用于计算元素高度（不显示在页面上）
  const $tempContainer = $('<div class="temp-page"></div>').css({
    position: 'absolute',
    top: '-9999px',
    left: '-9999px',
    width: $baseContainer.width(),
    padding: $baseContainer.css('padding'),
    margin: $baseContainer.css('margin'),
    fontSize: $baseContainer.css('fontSize'),
    lineHeight: $baseContainer.css('lineHeight')
  }).appendTo('body');

  const $content = $(rawHtml);
  let currentPage = $baseContainer.clone().empty().attr('id', `article${$('.article-page').length + 1}`).addClass('article-page');
  let currentHeight = 0;

  // 遍历每个内容节点，确保完整元素不被拆分
  $content.contents().each(function() {
    const $element = $(this);
    $tempContainer.append($element.clone());
    const elementHeight = $tempContainer.height();

    // 如果当前页放不下这个元素，就新建页面
    if (currentHeight + elementHeight > pageHeight) {
      $('body').append(currentPage);
      currentPage = $baseContainer.clone().empty().attr('id', `article${$('.article-page').length + 1}`).addClass('article-page');
      currentHeight = 0;
    }

    currentPage.append($element.clone());
    currentHeight += elementHeight;
    $tempContainer.empty();
  });

  // 添加最后一页
  if (currentPage.children().length > 0) {
    $('body').append(currentPage);
  }

  $tempContainer.remove();
}

2. 整合滑动幻灯片脚本 #

接下来调用分页函数，再结合横向滑动逻辑初始化幻灯片，和你提到的脚本逻辑匹配：

$(document).ready(function() {
  // 计算每页高度：屏幕高度减去上下留白（可按需调整）
  const pageHeight = $(window).height() - 60; // 60px用于避开状态栏/导航栏

  // 拆分$HtmlText到多个article容器
  splitTextToPages($HtmlText, '#article1', pageHeight);
  // 移除原始的空article1（如果不需要保留的话）
  $('#article1').remove();

  // 初始化横向排列容器
  const $slideContainer = $('<div class="slide-container"></div>').css({
    width: $(window).width() * $('.article-page').length,
    height: pageHeight,
    overflow: 'hidden',
    position: 'relative'
  }).append($('.article-page')).prependTo('body');

  $('.article-page').css({
    float: 'left',
    width: $(window).width(),
    height: pageHeight,
    overflow: 'hidden'
  });

  // 实现左右滑动切换逻辑（和你提到的脚本滑动逻辑对齐）
  let currentPageIndex = 0;
  const totalPages = $('.article-page').length;

  // 监听左滑（下一页）
  $(document).on('swipeleft', function() {
    if (currentPageIndex < totalPages - 1) {
      currentPageIndex++;
      $slideContainer.animate({ left: -currentPageIndex * $(window).width() }, 300);
    }
  });

  // 监听右滑（上一页）
  $(document).on('swiperight', function() {
    if (currentPageIndex > 0) {
      currentPageIndex--;
      $slideContainer.animate({ left: -currentPageIndex * $(window).width() }, 300);
    }
  });
});

3. 关键注意事项 #

• 特殊元素兼容：确保公式等特殊元素是块级元素或有明确高度，这样临时容器能准确计算高度，避免拆分完整的公式内容。
• 自适应调整：如果你的页面有固定导航栏，记得修改pageHeight的计算值，留出对应空间。
• 原脚本兼容：如果原幻灯片脚本有特定的容器结构或滑动事件，只需要把分页后的article容器插入到对应结构中，替换上述滑动逻辑即可。

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