请稍等 ...

留下个人mobileNavigationVue的写法，解决了点击Navigation视口范围外的tab的方法+高亮滑块准确定位

在第6章的最后，我在这里留下我自己的mobileNavigationVue的写法。

如果严格按照课程中的代码，那么如果点击navigation显示以外的目录，滚动条不会自动滚到那里。问题描述：https://coding.imooc.com/learn/questiondetail/Dg8m5XZL475PWa4B.html。
一个简单的思路是，给对应元素的滚动距离加上它距离视口的left偏移（这里包括还没有在视口之中出现的元素）。
此外，由于我们希望实现较好的多端响应式布局，尺寸方面采用固定的10px还是有些问题的，这里最佳的解决方案是利用 getComputedStyle() 函数。

附上getComputedStyle()的一个博客https://blog.csdn.net/qq_49907632/article/details/124461469

这里调整了老师对于关闭弹出框的代码的位置，使得逻辑更加合理。

// 4.watch 监听
watch(currentCategoryIndex, (value) => {
  const {left, width} = itemRefs[value].getBoundingClientRect();
  // 这里可以用 getComputedStyle 获取ul的padding
  let ulPadding = getComputedStyle(ulTarget.value, null).padding.slice(0, -2);  // 这里因为这种方法获取的是 8px 这个带有px的字符串
  ulPadding  = parseInt(ulPadding);
  sliderStyle.value = {
    // 滑块位置 = ul横向滚动的位置 + 当前元素相对于视口的left - ul的padding
    transform: `translateX(${ulScrollLeft.value + left - ulPadding}px)`,
    width: width + "px"
  };
  console.log(ulTarget.value.scrollLeft);
  /**
   * 在弹出框打开时，说明这是由点击弹出框菜单触发的tab切换
   * 1.关闭弹出框
   * 2.在navigation点击较为靠后的菜单item时，需要让顶上的tab滚动相应的距离，
   *  不然就会让滑块看不见了（点击navigation显示以外的目录，滚动条不会自动滚到那里）
   */
  if (isPopupVisible.value) {
    isPopupVisible.value = false;
    ulTarget.value.scrollLeft = left + ulTarget.value.scrollLeft;
  }
});

// item 点击事件（即每一个tab）
const handleItemclick = (index) => {
  currentCategoryIndex.value = index;
}