vue3组件 描点定位以及监听滚动切换对应activeTab

描点定位以及监听滚动切换对应activeTab

基本逻辑

  1. init 初始化 获取滚动区域内所有非文本子节点
  2. offsetTopArr 存储所有子节点的高度
  3. scroll 监听滚动的距离,找到还在可视区的元素高度
<template>
  <div class="tab-list">
    <div v-for="item in menuList" class="item" :class="{ 'is-active': active === item.value }">
      <a :href="`#${item.value}`" @click="active = item.value">{{ item.label }}</a>
    </div>
  </div>
  <div class="scroll-content" @scroll="handleScroll">
    <slot />
  </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue';
import { throttle } from 'lodash';

interface propsType {
  menuList: Array<{
    label: string;
    value: string;
  }>;
  parentClass: string;
}
const props = withDefaults(defineProps<propsType>(), {
  menuList: () => [],
});

const active = ref(props.menuList[0].value);

const offsetTopArr = ref([]);
const curIndex = ref(0);

const init = () => {
  const parentNode = document.querySelector(props.parentClass);
  const childNodesAll = parentNode.childNodes;
  for (let index = 0; index < childNodesAll.length; index++) {
    const child = childNodesAll[index];
    if (child.nodeType === 1) offsetTopArr.value.push(child.offsetTop);
  }
};

const handleScroll = throttle((e) => {
  curIndex.value = offsetTopArr.value.findIndex((item) => {
    return e.target.scrollTop <= item;
  });
  active.value = props.menuList[curIndex.value].value;
}, 200);

onMounted(() => {
  nextTick(init);
});
</script>

<style lang="scss" scoped>
.tab-list {
  height: 100%;
  width: 120px;
}
.scroll-content {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
</style>
  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值