Barba.js切换至'contacto'页面时重载多步骤表单脚本问题求助

1. 封装表单脚本为可复用函数 #

把多步骤表单的所有逻辑封装成独立函数，每次调用前先清理旧状态，避免重复绑定事件或残留动画导致异常：

function initContactForm() {
  // 先定位表单元素，不存在则直接返回
  const form = document.querySelector('#contact-form');
  if (!form) return;

  // 清理旧的事件监听和动画实例
  form.removeEventListener('submit', handleFormSubmit);
  gsap.killTweensOf('.form-step');

  // 以下是你的多步骤表单核心逻辑
  let currentStep = 0;
  const steps = form.querySelectorAll('.form-step');
  const nextButtons = form.querySelectorAll('.btn-next');
  const prevButtons = form.querySelectorAll('.btn-prev');

  // 步骤切换逻辑
  nextButtons.forEach(btn => {
    btn.addEventListener('click', () => {
      gsap.to(steps[currentStep], { opacity: 0, y: 20, duration: 0.3 });
      currentStep = Math.min(currentStep + 1, steps.length - 1);
      gsap.to(steps[currentStep], { opacity: 1, y: 0, duration: 0.3 });
    });
  });

  prevButtons.forEach(btn => {
    btn.addEventListener('click', () => {
      gsap.to(steps[currentStep], { opacity: 0, y: -20, duration: 0.3 });
      currentStep = Math.max(currentStep - 1, 0);
      gsap.to(steps[currentStep], { opacity: 1, y: 0, duration: 0.3 });
    });
  });

  // 表单提交逻辑
  function handleFormSubmit(e) {
    e.preventDefault();
    // 这里写你的表单提交代码
  }
  form.addEventListener('submit', handleFormSubmit);
}

2. 用Barba全局钩子触发表单初始化 #

在Barba初始化代码中，通过afterEnter钩子判断当前页面命名空间，匹配'contacto'时调用表单初始化函数：

barba.init({
  transitions: [
    // 你的GSAP过渡逻辑
    {
      name: 'default-transition',
      leave(data) {
        return gsap.to(data.current.container, { opacity: 0, duration: 0.5 });
      },
      enter(data) {
        return gsap.from(data.next.container, { opacity: 0, duration: 0.5 });
      }
    }
  ],
  hooks: {
    afterEnter(data) {
      // 页面过渡完成后，检查命名空间并初始化表单
      if (data.next.namespace === 'contacto') {
        initContactForm();
      }
    }
  }
});

3. Views模式的修正方案（如果之前用了Views） #

如果之前尝试Views无效，问题通常出在未正确清理旧实例或未在合适时机初始化，修正后的写法：

const ContactView = barba.BaseView.extend({
  namespace: 'contacto',
  // 页面过渡完成后初始化表单
  onEnterCompleted() {
    initContactForm();
  },
  // 离开页面时清理表单状态
  onLeave() {
    const form = document.querySelector('#contact-form');
    if (form) {
      form.removeEventListener('submit', handleFormSubmit);
      gsap.killTweensOf('.form-step');
    }
  }
});

// 注册View
ContactView.init();

关键注意事项 #

• 必须清理旧状态：每次初始化前移除事件监听、销毁残留动画，否则多次进入页面会导致事件重复触发、动画混乱。
• 选对钩子时机：用afterEnter或onEnterCompleted，确保新页面DOM已完全加载完成再初始化表单。
• 避免自执行脚本：如果表单脚本是外部引入的，不要写自执行函数，封装成可调用的函数才能被Barba钩子触发。

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