3回答

GoodZige

2022-06-13

可以在ul元素挂载后通过getComputedStyle获取ul的paddingLeft，这个值是准确的

1

0

Cloud_Iris

2022-10-02

感谢评论区另一位同学的点子，这里我改写为：

watch(currentCategoryIndex, (value) => {
  const {left, width} = itemRefs[value].getBoundingClientRect();
  let ulPadding = getComputedStyle(ulTarget.value, null).padding;  // 这里因为这种方法获取的是 8px 这个带有px的字符串
  ulPadding  = parseInt(ulPadding);
  sliderStyle.value = {
// 滑块的位置 = ul 横向滚动的位置 + 当前元素相对于视口的 left - ul 的padding
// 这里可以用 getComputedStyle  博客： https://blog.csdn.net/qq_49907632/article/details/124461469
    transform: `translateX(${ulScrollLeft.value + left - ulPadding}px)`,
    width: width + "px"
  }
});

应该就实现了动态处理ul的padding

0

0

Sunday

2022-06-06

你好

这是一个非常好的问题。

确实如你所说，直接减去 10 ，并不是一个最精准的解决方式，因为 rem 的关系，可能会导致这个 padding 在 9.375-10之间徘徊，如果根据 JS 去计算出准确的像素值确实会更加精准。

但是我个人还是觉得直接减去 10 ，是一个非常好的处理方案。因为这样非常简单，我们不需要再去进行额外的计算。并且因为咱们限定了 rem 的最大值，所以无论在任何的设备中，实际展示效果时我们可以发现并无明显差异。但是却可以节省非常多的计算和复杂度（心智负担）。

所以我觉得这不是一个精确的方案，但确实是一个很好地方案。

0

0