重新认识van-tabs，让你的页面导航不再失控

2024-02-15 17:10:02

在使用vant组件库中的van-tabs导航栏时，你可能会遇到一个看似简单却令人困惑的问题：明明可以通过拖拽来调整导航标签的顺序，但实际操作后，页面上的导航栏却纹丝不动，顺序没有任何改变。这究竟是怎么回事呢？

问题的根源在于van-tabs组件的CSS样式和JavaScript交互逻辑之间的脱节。当你拖拽导航标签时，实际上只是改变了标签在DOM结构中的顺序，而van-tabs组件默认的CSS样式并没有与这种变化同步更新。换句话说，视觉上的导航栏顺序仍然是由最初的CSS样式决定的，并没有根据你拖拽的操作进行动态调整。

为了解决这个问题，我们需要通过JavaScript代码来实现拖拽后的导航栏顺序更新，并同步修改CSS样式，以确保视觉效果与实际顺序保持一致。

解决方案：

我们可以借助JavaScript的事件监听和DOM操作来实现这个功能。

监听拖拽事件: 首先，我们需要监听每个导航标签的mousedown事件，也就是鼠标按下事件，这标志着拖拽操作的开始。
记录初始位置: 在mousedown事件触发时，我们需要记录下鼠标点击的位置和被拖拽标签的初始位置。
监听鼠标移动事件: 当鼠标按下后，我们需要监听mousemove事件，也就是鼠标移动事件。在mousemove事件触发时，我们需要计算出鼠标移动的距离，并根据这个距离来更新被拖拽标签的位置。
更新标签位置: 更新标签位置可以通过修改标签的CSS样式来实现，例如修改left或transform属性。
监听鼠标松开事件: 最后，我们需要监听mouseup事件，也就是鼠标松开事件。在mouseup事件触发时，我们需要停止监听mousemove事件，并将被拖拽标签的位置固定下来。

代码示例:

const tabs = document.querySelector('.van-tabs');
const nav = tabs.querySelector('.van-tabs__nav');
const navItems = nav.querySelectorAll('.van-tabs__nav-item');

navItems.forEach((navItem, index) => {
  navItem.addEventListener('mousedown', (e) => {
    // 记录初始位置
    let offsetX = e.clientX - navItem.offsetLeft;
    let startX = navItem.offsetLeft;

    document.addEventListener('mousemove', (e) => {
      // 计算鼠标移动距离
      let currentX = e.clientX - offsetX;

      // 更新标签位置
      navItem.style.left = `${currentX - startX}px`;
    });

    document.addEventListener('mouseup', () => {
      // 停止监听mousemove事件
      document.removeEventListener('mousemove');

      // 其他操作，例如更新DOM结构、保存新的导航栏顺序等
    });
  });
});