基于Vue3实现鼠标滑动和滚轮控制的轮播

interface ListType {
    title: string
    icon: string
    img: string
    desc: string[]
}
const list: ListType = []

<ul class="swipper-wrapper">
    <li class="swipper-item" 
        v-for="(item, index) in list" 
        :class="{ active: index === activeIndex }"
        @click="activeIndex = index"
     >
      <img class="swipper-item-icon" :src="item.icon" alt="">
      {{ item.title }}
    </li>
 </ul>

const activeIndex = ref(0)

const NUM = 7 // 展示的卡片数量（奇数）
function getSurroundingNumbers(length: number, activeIndex: number) {
  var start = activeIndex - (NUM - 1) / 2;
  var end = activeIndex + (NUM + 1) / 2;

  if (activeIndex < (NUM - 1) / 2) {
    start = 0;
    end = NUM;
  }

  if (activeIndex > length - (NUM + 1) / 2) {
    start = length - NUM;
    end = length;
  }

  var result = [];
  for (var i = start; i < end; i++) {
    result.push(i);
  }

  return result;
}

const surroundingNumbers = computed(() => getSurroundingNumbers(list.length, activeIndex.value))

function getSwiperItemStyle(index: number) {
  // 每个卡片高度60px 间隔16px
  // 最多正常展示NUM个，其余藏在后，只露出16px高度
  const HIDEH = 15,
    H = 60,
    M = 16;
  
  let y = 0,
    scaleX = 1,
    backgroundColor = '#f9fbfc',
    zIndex = 9999,
    boxShadow = '2px 2px 1px 0px rgba(0,0,0,0.04), #fff 0px -2px 0px 0px';

  if (!surroundingNumbers.value.includes(index)) {
    backgroundColor = '#EBEDF2'
    zIndex = zIndex - Math.abs(activeIndex.value - index) + 2
    scaleX = 0.98 ** (Math.abs(activeIndex.value - index) + 2)

    if (index < surroundingNumbers.value[0]) {
      // 在上面
      y = HIDEH * index
      scaleX = 0.98 ** (surroundingNumbers.value[0] - index)
      boxShadow = '2px 2px 1px 0px rgba(255, 255, 255, .3) inset';
    } else {
      // 在下面
      y = surroundingNumbers.value[0] * HIDEH + (NUM - 1) * (H + M) + (index - surroundingNumbers.value.at(-1)!) * HIDEH
      scaleX = 0.98 ** (index - surroundingNumbers.value.at(-1)!)
      boxShadow = '2px 2px 1px 0px rgba(0,0,0,0.04)';
    }
  } else {
    y = surroundingNumbers.value[0] * HIDEH + (index - surroundingNumbers.value[0]) * (H + M)
  }

  if (activeIndex.value === index) {
    boxShadow = '5px 6px 12px 0px rgba(0,0,0,0.08), #fff 0px -2px 0px 0px';
  }


  return {
    transform: 'translateY(' + y / 19.2 + 'vw) scaleX(' + scaleX + ')',
    backgroundColor,
    zIndex,
    boxShadow
  }
}

<ul class="swipper-wrapper">
    <li class="swipper-item" 
        v-for="(item, index) in list" 
        :class="{ active: index === activeIndex }"
        :style="getSwiperItemStyle(index)"
        @click="activeIndex = index"
     >
      <img class="swipper-item-icon" :src="item.icon" alt="">
      {{ item.title }}
    </li>
 </ul>

// 处理鼠标滚动
function wheel(event: WheelEvent) {
  event.preventDefault(); // 防止页面滚动
  if (event.deltaY < 0) {
    // 向下滚动，activeIndex减少
    activeIndex.value = Math.max(0, activeIndex.value - 1);
  } else {
    // 向上滚动，activeIndex增加
    activeIndex.value = Math.min(list.length - 1, activeIndex.value + 1);
  }
}

// 处理滑动
let startY = 0; // 鼠标按下时的y坐标
let accumulatedDiffY = 0; // 累积的滑动距离
let swiping = false; // 是否正在滑动

function startSwipe(event: MouseEvent) {
  startY = event.clientY;
  swiping = true;
}

function swipe(event: MouseEvent) {
  if (!swiping) return;
  const currentY = event.clientY;
  const diffY = currentY - startY;

  // 累积滑动距离
  accumulatedDiffY += diffY;

  // 假设每个元素的高度是100px
  const elementHeight = 84;

  // 使用累积的滑动距离计算滑动的元素数量，向下取整
  const numItems = Math.floor(Math.abs(accumulatedDiffY) / elementHeight);

  if (accumulatedDiffY > 0) {
    // 向下滑动，activeIndex减少
    if (activeIndex.value <= 2) return
    activeIndex.value = Math.min(list.length - 3, activeIndex.value)
    activeIndex.value = Math.max(0, activeIndex.value - numItems);
    accumulatedDiffY -= numItems * elementHeight; // 更新累积的滑动距离
  } else {
    // 向上滑动，activeIndex增加
    if (activeIndex.value >= list.length - 3) return
    activeIndex.value = Math.max(2, activeIndex.value)
    activeIndex.value = Math.min(list.length - 1, activeIndex.value + numItems);
    accumulatedDiffY += numItems * elementHeight; // 更新累积的滑动距离
  }

  // 更新起始Y坐标
  startY = currentY;
}

function endSwipe(event: MouseEvent) {
  swiping = false;
  accumulatedDiffY = 0; // 结束滑动时重置累积的滑动距离
}

// 自动切换定时器
const { pause, resume } = useIntervalFn(() => {
  activeIndex.value++
  if (activeIndex.value >= list.length - 1) {
    activeIndex.value = 0
  }
}, 3000)

// 重新自动切换的倒计时
const { start: startTimeoutFn, stop: stopTimeoutFn } = useTimeoutFn(resume, 5000)