基于原生JavaScript的Swiper三种锚定实现方案咨询

你的三个需求核心逻辑高度一致：获取目标幻灯片的索引，调用Swiper的slideToLoop()方法定位（因为你开启了loop: true，slideToLoop针对原始幻灯片索引，不会被循环复制的幻灯片干扰）。下面是统一结构的实现代码：

统一定位函数 #

先封装一个通用的定位函数，三种场景都调用它：

// 通用幻灯片定位函数
function navigateToSlide(targetIndex) {
  // 校验索引有效性：loop模式下swiper.slides包含原始幻灯片+前后各一组复制的，真实数量是总长度的1/3
  const realSlideCount = swiper.slides.length / 3;
  if (typeof targetIndex === 'number' && targetIndex >= 0 && targetIndex < realSlideCount) {
    swiper.slideToLoop(targetIndex, 0); // 第二个参数0表示无动画切换，按需调整
  }
}

1. 锚定当日日期对应的幻灯片 #

假设你已经通过日期计算出目标幻灯片的索引dateTargetIndex（比如1号对应索引0，2号对应索引1），直接调用通用函数：

// 替换成你的日期计算逻辑，这里示例为当前日期减1得到索引
const dateTargetIndex = new Date().getDate() - 1; 
navigateToSlide(dateTargetIndex);

2. 通过URL哈希强制切换 #

解析URL中的哈希（比如http://xxx.com/#slide-3），提取目标索引后调用通用函数：

// 解析哈希获取目标索引
function getHashTargetIndex() {
  const hash = window.location.hash.slice(1); // 去掉开头的#
  if (hash.startsWith('slide-')) {
    return parseInt(hash.split('-')[1], 10) - 1; // 假设#slide-3对应索引2，按需调整规则
  }
  return null;
}

// 初始化时执行定位
const hashIndex = getHashTargetIndex();
if (hashIndex !== null) {
  navigateToSlide(hashIndex);
}

// 可选：监听哈希变化，实时切换
window.addEventListener('hashchange', () => {
  const newHashIndex = getHashTargetIndex();
  if (newHashIndex !== null) {
    navigateToSlide(newHashIndex);
  }
});

3. 通过URL查询参数强制切换 #

解析URL中的查询参数（比如http://xxx.com/?slide=4），提取目标索引后调用通用函数：

// 解析查询参数获取目标索引
function getQueryTargetIndex() {
  const params = new URLSearchParams(window.location.search);
  const slideParam = params.get('slide');
  if (slideParam) {
    return parseInt(slideParam, 10) - 1; // 假设?slide=4对应索引3，按需调整规则
  }
  return null;
}

// 初始化时执行定位
const queryIndex = getQueryTargetIndex();
if (queryIndex !== null) {
  navigateToSlide(queryIndex);
}

整合到你的Swiper初始化代码 #

把以上代码整合到你的初始化逻辑中，注意在Swiper初始化完成后执行定位（通过init事件），同时可以调整三种方式的优先级（比如让URL参数/哈希的优先级高于日期，实现“强制切换”）：

const swiper = new Swiper('.swiper', {  
  direction: 'vertical',
  loop: true,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  on: {
    resize: function () {
      swiper.changeDirection('vertical');
    },
    init: function() {
      // 1. 日期定位（基础逻辑）
      const dateTargetIndex = new Date().getDate() - 1;
      navigateToSlide(dateTargetIndex);

      // 2. 查询参数定位（优先级高于日期）
      const queryIndex = getQueryTargetIndex();
      if (queryIndex !== null) {
        navigateToSlide(queryIndex);
      }

      // 3. 哈希定位（优先级最高）
      const hashIndex = getHashTargetIndex();
      if (hashIndex !== null) {
        navigateToSlide(hashIndex);
      }
    }
  },
  pagination: {
    el: '.swiper-pagination',
    type: "fraction",
  },
  hashNavigation: {
    watchState: true, // 保留此配置，让幻灯片切换时自动更新URL哈希
  },
});

// 通用定位函数
function navigateToSlide(targetIndex) {
  const realSlideCount = swiper.slides.length / 3;
  if (typeof targetIndex === 'number' && targetIndex >= 0 && targetIndex < realSlideCount) {
    swiper.slideToLoop(targetIndex, 0);
  }
}

// 哈希解析函数
function getHashTargetIndex() {
  const hash = window.location.hash.slice(1);
  if (hash.startsWith('slide-')) {
    return parseInt(hash.split('-')[1], 10) - 1;
  }
  return null;
}

// 查询参数解析函数
function getQueryTargetIndex() {
  const params = new URLSearchParams(window.location.search);
  const slideParam = params.get('slide');
  if (slideParam) {
    return parseInt(slideParam, 10) - 1;
  }
  return null;
}

// 监听哈希变化
window.addEventListener('hashchange', () => {
  const hashIndex = getHashTargetIndex();
  if (hashIndex !== null) {
    navigateToSlide(hashIndex);
  }
});

关于hashNavigation的说明 #

你配置的hashNavigation: { watchState: true }可以保留，它的作用是当用户手动切换幻灯片时，自动更新URL的哈希（比如切换到第3张幻灯片时，URL变为#slide-3），和我们实现的“通过URL强制切换”是互补的，不冲突。

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