15 vue将顶部控制栏集成到滚动监听函数中

small_wh1te_coder

已于 2024-05-26 21:46:43 修改

阅读量141

点赞数 1

文章标签： vue.js javascript 前端

于 2024-04-22 01:51:19 首次发布

本文链接：https://blog.csdn.net/c5dnuser/article/details/138051670

版权

本文介绍了一个JavaScript代码片段，通过监听scrollTop事件，实现了一个动态匹配算法，根据页面滚动位置自动调整tabControlRef的currentIndex，以显示当前可视区域内的栏目。

摘要由CSDN通过智能技术生成

废话不多说
直接上代码

const tabControlRef = ref()
watch(scrollTop, (newValue) => {
  // if (newValue === currentDistance) {
  //   isClick = false
  // }
  // if (isClick) return

  // #smallCoderwhite 
  // 1.获取所有的区域的offsetTops
  // sectionEls:{ 描述： el元素   设置：el元素    房东：el元素    详情：el元素  }
  const els = Object.values(sectionEls.value)
  // 拿到每个元素之后，直接map匹配到它的滚动值
  const values = els.map(el => el.offsetTop)

  let index = values.length
  for(let i = 0 ;i<values.length;i++){
    if(newValue+44<values[i]){
      index = i -1
      break
    }
  }
  // 直接看一下现在的取到的值
  console.log(index)
  tabControlRef?.value?.setCurrentIndex(index)

  // 2.根据newValue去匹配想要索引
  // let index = values.length - 1
  // for (let i = 0; i < values.length; i++) {
  //   if (values[i] > newValue + 44) {
  //     index = i - 1
  //     break
  //   }
  // }
  // console.log(index)
  // tabControlRef.value?.setCurrentIndex(index)
})

利用动态匹配算法，求出现在的滚动位置，在之前的基础上剪掉44然后再剪掉1，

可以看到每多一个栏目，都可以直接看到目前到了哪一栏