Vue3 +Ts 实现美团二级联动效果

• index.Vue

<template slot-scope="scope">
  <div class="Linkage-Box">
    <div class="Linkage-Box-left" ref="leftlink">
      <div @click="handelchange(index)" :class="selectIndex === index ? 'action' : ''" v-for="(item, index) in carList"
        :key="index">
        {{ item }}
      </div>
    </div>
    <div class="Linkage-Box-right" @scroll="Fnscroll" ref="rightlink" @touchstart="rihandelscroll">
      <div v-for="(item, index) in carList" :key="index">{{ item }}</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
const selectIndex = ref<number>(0);
const flag = ref<boolean>(true);
const rightlink = ref<HTMLDivElement | null>(null);
const leftlink = ref<HTMLDivElement | null>(null);
const getleftlink = () => leftlink.value as HTMLDivElement;
const getrightlink = () => rightlink.value as HTMLDivElement;
const carList = ref<number[]>([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]);
const selectarr = ref<number[]>([]);
const height = ref<number>(0);
const Riheight = ref<number>(0);
onMounted(() => {
  Riheight.value = (getrightlink().children[0] as HTMLDivElement).offsetHeight
  selectarr.value.push(height.value);
  getrightlink().childNodes.forEach(item => {
    height.value += Riheight.value
    selectarr.value.push(height.value);
  });
})
const handelchange = (index: number) => {
  flag.value = false;
  selectIndex.value = index;
  getrightlink().scrollTop = index * Riheight.value
  getleftlink().scrollTop = index >= 4 ? (index - 3) * 84 : 0
};
const Fnscroll = () => {
  if (flag.value === false) return
  selectarr.value.forEach((item, index) => {
    if (getrightlink().scrollTop >= item - 50) {
      selectIndex.value = index;
      getleftlink().scrollTop = index >= 4 ? (index - 3) * 84 : 0
    }
  });
};
const rihandelscroll = () => {
  flag.value = true
}
</script>
<style lang="less" scoped="scoped">
.Linkage-Box {
  width: 100vw;
  height: 100vh;
  background: red;
  display: flex;
  overflow: hidden;

  .Linkage-Box-left::-webkit-scrollbar {
    display: none;
  }

  .Linkage-Box-left {
    width: 25vw;
    height: 100vh;
    background: skyblue;
    overflow-y: scroll;
    scroll-behavior: smooth;

    >div {
      width: 100%;
      height: 150px;
      border-bottom: 0.5px solid #000;
      font-size: 30px;
      text-align: center;
      line-height: 150px;
    }
  }

  .Linkage-Box-right::-webkit-scrollbar {
    display: none;
  }

  .Linkage-Box-right {
    width: 75vw;
    height: 100vh;
    background: pink;
    overflow-y: scroll;
    scroll-behavior: smooth;

    >div {
      width: 100%;
      height: 90vh;
      border-bottom: 0.5px solid #000;
      font-size: 80px;
      text-align: center;
    }
  }
}

.action {
  background: pink;
}
</style>

大致思路和我之前写的React+Hook的思路一致  就是语法实现的转换;

文章标题：React + Ts + Hook实现美团左右二级联动