3回答

快乐源泉

2023-01-25

添加下实现功能的代码片段（仅供参考）

...
// watch 监听
watch(currentCategoryIndex, (val) => {
    const { left, width } = itemRefs[val].getBoundingClientRect()
    sliderStyle.value = {
        // 滑块的位置 = ul 横向滚动未知 + 当前元数的 left
        transform: `translateX(${ulScrollLeft.value + left - 10}px)`,
        width: width + 'px'
    }
    
    // 不在可视区，修改 ulTarget scrollLeft 值
    if (!isInViewPort(itemRefs[val])) {
        const list = itemRefs.slice(0, val)
        const ulTargetScollLeft = list.reduce(
            (sum, item) => sum + item.getBoundingClientRect().width,
            0
        )
    
        ulTarget.value.scrollLeft = ulTargetScollLeft
    }
})

// 判断元素是否在可视区
const isInViewPort = (el) => {
    const viewWidth = window.innerWidth || document.documentElement.clientWidth
    const viewHeight = window.innerHeight || document.documentElement.clientHeight
    const { top, right, bottom, left } = el.getBoundingClientRect()
    return top >= 0 && left >= 0 && right <= viewWidth && bottom <= viewHeight
}
...

0

0

coolpi21

2022-06-04

添加下实现功能的代码片段（仅供参考）

// 获取navigator scrollLeft值
const getScrollLeft = (index, eleList) => {
  const list = eleList.slice(0, index)
  return list.reduce((pv, cv) => pv + cv.getBoundingClientRect().width, 0)
}

// 滑块的transform值
sliderStyle.value = {
    transform: `translateX(${getScrollLeft(val, itemRefs)}px)`,
    ...
}
// 设置scrollLeft值
...
ulTarget.value.scrollLeft = getScrollLeft(index, itemRefs)

// ul添加class属性
class="... scroll-smooth"

0

0

Sunday

2022-05-18

你好

这是一个定位的业务问题。如果要实现这个功能，则需要控制横向 scroll 的滚动。

可以根据 选中的 item 坐标，来控制  ref="ulTarget" 的横向 scroll 的方式来进行实现。

0

7

Sunday

回复

曹学习

最近有一个同学提出了一种具体解决方案的问答：https://coding.imooc.com/learn/questiondetail/2vGBE6xZAbwYNkaq.html 也可以给大家进行下参考。

2022-06-05

共7条回复