更新记录

1.0.0（2025-11-19）

横向拖拽排序，支持边缘自动滚动

平台兼容性

uni-app(3.6.14)

其他

ThumbRow 拖拽缩略图组件使用说明

基于 scroll-view 的横向缩略图列表，支持长按拖拽排序、点击切换激活项、边缘自动滚动，适用于图片/视频选择等场景（uni-app + Vue 3）。

1. 功能概述

• 横向缩略图列表，支持滚动。
• 长按进入拖拽模式，拖动可改变顺序。
• 拖动到列表边缘自动横向滚动。
• 点击缩略图更新当前激活索引。
• 支持“添加”按钮（上限 maxCount）。
• 通过 idKey 支持数据项唯一标识。
• 提供组合式函数 useThumbRow 可复用逻辑。

2. 基本使用示例

2.1 组件示意

<template>
    <ThumbRow
        :items="files"
        v-model:activeIndex="activeIndex"
        :maxCount="9"
        :idKey="'id'"
        @reorder="onReorder"
        @after-reorder="onAfterReorder"
        @add="onAdd"
    >
        <!-- 每个缩略图内容 -->
        <template #item="{ item, idx, active, dragging }">
            <view class="thumb" :class="{ active, dragging }">
                <image :src="item.thumbUrl" mode="aspectFill" />
            </view>
        </template>

        <!-- 添加按钮 -->
        <template #add>
            <view class="thumb add-btn">
                +
            </view>
        </template>
    </ThumbRow>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// import ThumbRow from '你的组件路径';

const files = ref([
    { id: 1, thumbUrl: '...' },
    { id: 2, thumbUrl: '...' }
]);

const activeIndex = ref(0);

// 实际数据重排逻辑由使用方处理
const onReorder = (from: number, to: number) => {
    const list = files.value.slice();
    const [moved] = list.splice(from, 1);
    list.splice(to, 0, moved);
    files.value = list;
};

const onAfterReorder = (to: number) => {
    activeIndex.value = to;
};

const onAdd = () => {
    // 打开相册 / 相机 等
};
</script>