UniApp+Vue3实现高性能无限滚动卡片组件：垂直滑动、触摸拖拽与动态导航的完美结合

引言

在移动应用开发中，流畅且吸引人的用户界面对于提升用户体验至关重要。本文将详细介绍如何使用UniApp和Vue3框架构建一个具有垂直方向无限滚动卡片、触摸拖拽支持、同步导航栏和平滑动画效果的高级UI组件。我们将通过代码分析每个功能的实现细节，帮助开发者理解这类复杂交互组件的开发思路。

实现效果

我们开发的组件具有以下特点：

垂直方向的无限滚动卡片
流畅的触摸拖拽支持
右侧同步高亮的导航栏
卡片缩放动画效果
自动循环复位机制

效果预览

核心实现

1. 数据结构与状态管理

首先，我们通过Vue3的组合式API来管理组件的状态

// 导入原始规则数据
import rulesJson from "@/json/rules/index.json";

// 存储原始规则数据
const originalRulesData = ref(rulesJson.rules);

// 创建循环数组，包含三组相同的数据，用于实现无限滚动
const loopRulesData = computed(() => [
  ...originalRulesData.value,
  ...originalRulesData.value,
  ...originalRulesData.value
]);

// 单个卡片高度
const cardHeight = 688.43;

// 当前显示的实际索引（用于右侧导航）
const currentIndex = ref(0); 

// 显示索引（用于卡片位置计算）
const displayIndex = ref(originalRulesData.value.length);

// Y轴偏移量
const translateY = ref(-originalRulesData.value.length * cardHeight);

// 触摸事件相关状态
const startY = ref(0);
const moveY = ref(0);
const isDragging = ref(false);
const enableTransition = ref(true);

这里的关键点是我们创建了一个"循环数组"（loopRulesData），包含三组相同的数据。这是实现无限滚动的核心思路，允许用户在第一组数据之前和第三组数据之后继续滚动，然后在适当的时机无缝重置位置。

2. 垂直方向无限滚动实现

无限滚动的关键在于三个部分：

使用三倍数据长度的数组
初始化位置在中间组的起始位置
当滚动到边界时，无缝重置到中间组的对应位置

<view
  class="cards-container"
  :style="{ 
    transform: `translateY(${translateY}rpx)`,
    transition: enableTransition ? 'transform 0.3s ease-out' : 'none'
  }"
>
  <view
    v-for="(item, index) in loopRulesData"
    :key="index"
    class="rule-card"
    :class="{ 'rule-card-active': displayIndex === index }"
  >
    <!-- 卡片内容 -->
  </view>
</view>

// 触摸结束事件处理
const touchEnd = () => {
  if (!isDragging.value) return;
  isDragging.value = false;

  const diff = translateY.value - moveY.value;
  const direction = diff > 0 ? -1 : 1; // 确定滑动方向
  const minSwipeDistance = cardHeight * 0.15; // 最小滑动距离阈值

  if (Math.abs(diff) > minSwipeDistance) {
    enableTransition.value = true;
    displayIndex.value += direction;
    
    // 更新实际索引并处理循环
    let newIndex = currentIndex.value + direction;
    if (newIndex < 0) {
      newIndex = originalRulesData.value.length - 1;
    } else if (newIndex >= originalRulesData.value.length) {
      newIndex = 0;
    }
    currentIndex.value = newIndex;

    // 执行带动画的滑动
    translateY.value = -displayIndex.value * cardHeight;

    const length = originalRulesData.value.length;
    // 处理无限滚动的边界情况
    if (displayIndex.value >= length * 2) {
      // 当滑动到第三部分时，无动画地重置到中间部分
      setTimeout(() => {
        enableTransition.value = false;
        displayIndex.value = length;
        translateY.value = -length * cardHeight;
      }, 300);
    } else if (displayIndex.value < length) {
      // 当滑动到第一部分时，无动画地重置到中间部分
      setTimeout(() => {
        enableTransition.value = false;
        displayIndex.value = length * 2 - 1;
        translateY.value = -(length * 2 - 1) * cardHeight;
      }, 300);
    }
  } else {
    // 如果滑动距离不够，回弹到原位
    enableTransition.value = true;
    translateY.value = -displayIndex.value * cardHeight;
  }
};

这段代码的精髓在于：

用户看到的是平滑的动画滚动
但在滚动到边界后，我们在动画完成时（通过setTimeout配合动画持续时间）禁用过渡效果，并立即重置位置
重置操作对用户不可见，因此创造了无限滚动的错觉

3. 触摸拖拽支持

触摸拖拽通过三个关键事件实现：touchstart、touchmove和touchend：

// 触摸开始事件处理
const touchStart = (e: TouchEvent) => {
  isDragging.value = true;
  enableTransition.value = false; // 关闭过渡动画以实现流畅拖动
  startY.value = e.touches[0].clientY;
  moveY.value = translateY.value;
};

// 触摸移动事件处理
const touchMove = (e: TouchEvent) => {
  if (!isDragging.value) return;
  
  const currentY = e.touches[0].clientY;
  const diff = (currentY - startY.value) * 1.8; // 1.8为移动速度系数
  translateY.value = moveY.value + diff;
};

这里的关键点：

在touchStart中禁用过渡动画，确保拖拽感觉更自然
在touchMove中计算手指移动距离，并实时更新translateY
使用系数1.8放大移动效果，使滚动感觉更加灵敏

4. 右侧同步导航栏

右侧导航栏需要与当前显示的卡片保持同步：

<view class="right-nav">
  <view
    v-for="(item, index) in originalRulesData"
    :key="index"
    class="nav-item"
    :class="{ 'nav-item-active': currentIndex === index }"
    @click="handleNavClick(index)"
  >
    {{ item.title }}
  </view>
</view>

// 右侧导航点击处理
const handleNavClick = (index: number) => {
  currentIndex.value = index;
  // 直接跳转到中间部分的对应位置
  displayIndex.value = originalRulesData.value.length + index;
  translateY.value = -displayIndex.value * cardHeight;
};

导航逻辑的关键点：

使用currentIndex来跟踪实际的数据索引（而不是循环数组中的索引）
在用户滑动卡片时更新currentIndex
点击导航时，直接跳转到中间组的对应卡片位置

5. 卡片缩放动画效果

缩放动画通过CSS类和条件渲染实现

<view
  class="rule-card"
  :class="{ 'rule-card-active': displayIndex === index }"
>
  <!-- 卡片内容 -->
</view>

.rule-card {
  width: 447.76rpx;
  height: 688.43rpx;
  padding: 30rpx;
  position: relative;
  border-radius: 50rpx;
  opacity: 0.4;
  box-sizing: border-box;
  margin-bottom: 0;
  transition: all 0.3s;
  transform: scale(0.8);
  background-color: transparent;
}

.rule-card-active {
  opacity: 1;
  transform: scale(1);
}

动画效果的关键点：

非活跃卡片应用了scale(0.8)缩小效果和降低透明度
活跃卡片恢复正常大小和完全不透明
使用CSS过渡(transition: all 0.3s)使变化平滑
通过比较displayIndex和循环列表的索引来确定哪张卡片是当前活跃的

6. 自动循环复位

循环复位是无限滚动的关键部分，在touchEnd事件中实现：

// 省略前面的代码...
  const length = originalRulesData.value.length;
    // 处理无限滚动的边界情况
    if (displayIndex.value >= length * 2) {
      // 当滑动到第三部分时，无动画地重置到中间部分
      setTimeout(() => {
        enableTransition.value = false;
        displayIndex.value = length;
        translateY.value = -length * cardHeight;
      }, 300);
    } else if (displayIndex.value < length) {
      // 当滑动到第一部分时，无动画地重置到中间部分
      setTimeout(() => {
        enableTransition.value = false;
        displayIndex.value = length * 2 - 1;
        translateY.value = -(length * 2 - 1) * cardHeight;
      }, 300);
    }

复位机制的关键点：

使用requestAnimationFrame和setTimeout确保在动画完成后再进行重置
禁用过渡动画(enableTransition = false)使重置操作对用户不可见
根据滚动方向决定重置到哪个位置

完整代码解析

以下是组件模板的关键部分：

<template>
  <view class="page-wrapper">
    <!-- 背景图和顶部图片 -->
    <image class="bg-image" src="@/static/ruleBg.jpg" mode="aspectFill" />
    <image class="top-image" src="@/static/ruleTop.jpg" mode="aspectFit" />
    <image class="go-back" @click="handleGoBack" src="@/static/goback.png" />

    <!-- 主要内容区域 -->
    <view class="content-container">
      <!-- 左侧卡片区域，绑定触摸事件 -->
      <view
        class="left-content"
        @touchstart="touchStart"
        @touchmove="touchMove"
        @touchend="touchEnd"
      >
        <!-- 卡片容器，应用动态样式实现滚动效果 -->
        <view
          class="cards-container"
          :style="{ 
            transform: `translateY(${translateY}rpx)`,
            transition: enableTransition ? 'transform 0.3s ease-out' : 'none'
          }"
        >
          <!-- 渲染循环数组中的所有卡片 -->
          <view
            v-for="(item, index) in loopRulesData"
            :key="index"
            class="rule-card"
            :class="{ 'rule-card-active': displayIndex === index }"
          >
            <image
              class="rule-card-bg"
              src="@/static/ruleCoverBg.png"
              mode="scaleToFill"
            />
            <view class="rule-content">
              <view class="rule-title">{{ item.title }}</view>
              <view class="rule-desc">{{ item.content }}</view>
              <button class="play-btn" open-type="share">
                <image src="@/static/playThis.png" mode="aspectFit" />
              </button>
            </view>
          </view>
        </view>
      </view>

      <!-- 右侧导航 -->
      <view class="right-nav">
        <view
          v-for="(item, index) in originalRulesData"
          :key="index"
          class="nav-item"
          :class="{ 'nav-item-active': currentIndex === index }"
          @click="handleNavClick(index)"
        >
          {{ item.title }}
        </view>
      </view>
    </view>
  </view>
</template>

性能优化

这个组件实现中的几个性能优化点值得注意：

硬件加速：使用 transform: translateZ(0) 和 -webkit-transform: translateZ(0) 触发GPU加速

.cards-container {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

平滑过渡：使用cubic-bezier曲线优化过渡动画

transition: transform 0.25s cubic-bezier(0.33, 1, 0.68, 1);

性能提示：使用will-change属性告知浏览器元素属性将要发生变化
```
will-change: transform;
```
滚动阈值：设置最小滑动距离阈值，避免微小移动触发滚动
```
const minSwipeDistance = cardHeight * 0.15;
```

适配与样式细节

组件的样式设计也有一些值得关注的细节：

/* 防止底部出现生硬的白色边界 */
.left-content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100rpx;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1));
  pointer-events: none;
}

/* 激活状态的导航项样式 */
.nav-item-active {
  width: 243rpx;
  height: 104rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 22rpx 0rpx #ffae00;
  border-radius: 11rpx 0rpx 0rpx 11rpx;
  opacity: 1;
  font-size: 34rpx;
}

这些细节包括：