更新记录

1.0.5（2025-01-07）

优化微信小程序性能

1.0.4（2024-12-27）

优化性能

1.0.3（2024-12-10）

修复缺失 extension 报错问题

平台兼容性

uni-app

drag-scroll-view

拖拽排序列表组件，支持边缘自动滚动，无需设置子组件高度

快速上手

<template>
    <drag-scroll-view 
        :list="list" 
        height="600rpx"
        @change="handleChange"
    >
        <template #default="{item, index}">
            <view class="item">
                <view>{{item.name}}</view>
                <!--必须设置拖拽手柄，否则无法拖动-->
                <drag-handle :index="index">拖拽手柄</drag-handle>
            </view>
        </template>
    </drag-scroll-view>
</template>

<script lang="ts" setup>
const list = ref([
    {name: 'A'},
    {name: 'B'},
    {name: 'C'},
    {name: 'D'},
    {name: 'E'},
    {name: 'F'},
    {name: 'G'},
]);

const handleChange = (e: {oldIndex: number, newIndex: number})=>{
    console.log(`原index: ${e.oldIndex}, 新index: ${e.newIndex}`);

    // TODO 手动改变list或向后台发送数据
}
</script>

Props 参数

• list: any[] 数组数据
• height: string 高度(必须设置)，支持 px/rpx/%
• scrollThreshold: number (可选，默认40) 触发边缘滚动阈值 px
• scrollMinSpeed: number (可选，默认20) 最小滚动速度 (px/s)。距边缘越远，速度越接近该值
• scrollMaxSpeed: number (可选，默认150) 最大滚动速度 (px/s)。距边缘越近，速度越接近该值
• lineHeight: number (可选，默认3) 标记线的高度 px
• lineColor: string (可选，默认'#444cf7') 标记线颜色

Events 事件

change(event) 排序改变事件

event 参数:

• oldIndex: number 原下标
• newIndex: number 新下标

Slots 插槽

default 列表项

注意：不能给插槽样式设置margin，这会导致组件高度计算不正确。如果想给子组件设置间隙，可以在外层设置padding

作用域:

• item: any list项数据
• index: number list项下标

ghost 幽灵节点

通过此插槽，可自定义幽灵节点

完整演示

<template>
    <view class="container">
        <view style="padding: 20rpx">drag-scroll-view</view>
        <drag-scroll-view 
            :list="list" 
            height="600rpx"
            @change="handleChange"
        >
            <template #default="{item, index}">
                <view class="item">
                    <view>{{item.name}}</view>
                    <!--必须设置拖拽手柄，否则无法拖动-->
                    <drag-handle :index="index">拖拽手柄</drag-handle>
                </view>
            </template>
            <template #ghost="{item, index}">
                <view class="item ghost">
                    <view>{{item.name}}</view>
                    <!-- 这里的手柄仅用于显示，可以不使用 -->
                    <drag-handle :index="index">拖拽手柄</drag-handle>
                </view>
            </template>
        </drag-scroll-view>
    </view>
</template>

<script lang="ts" setup>

const list = [
    { name: 'A', },
    { name: 'B', },
    { name: 'C', },
    { name: 'D', },
    { name: 'E', },
    { name: 'F', },
    { name: 'G', },
    { name: 'H', },
    { name: 'I', },
    { name: 'J', },
    { name: 'K', },
    { name: 'L', },
    { name: 'M', },
    { name: 'N', },
    { name: 'U', },
    { name: 'V', },
    { name: 'W', },
    { name: 'X', },
    { name: 'Y', },
    { name: 'Z', },
];

const handleChange = (e: {oldIndex: number, newIndex: number})=>{
    console.log(e);
}
</script>

<style lang="scss" scoped>
.container{
    height: 1000rpx;
    background: #f8f8f8;

    .item{
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        border-radius: 20rpx;
        box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
        padding: 20rpx;
        margin: 0 6rpx;

        &.ghost{
            opacity: 0.9;
            scale: 0.96;
        }
    }
}
</style>