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. 垂直方向无限滚动实现

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

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

<viewclass="cards-container":style="{ transform: `translateY(${translateY}rpx)`,transition: enableTransition ? 'transform 0.3s ease-out' : 'none'}"
><viewv-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"><viewv-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类和条件渲染实现

<viewclass="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"><!-- 左侧卡片区域，绑定触摸事件 --><viewclass="left-content"@touchstart="touchStart"@touchmove="touchMove"@touchend="touchEnd"><!-- 卡片容器，应用动态样式实现滚动效果 --><viewclass="cards-container":style="{ transform: `translateY(${translateY}rpx)`,transition: enableTransition ? 'transform 0.3s ease-out' : 'none'}"><!-- 渲染循环数组中的所有卡片 --><viewv-for="(item, index) in loopRulesData":key="index"class="rule-card":class="{ 'rule-card-active': displayIndex === index }"><imageclass="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"><viewv-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;
}

这些细节包括：