更新记录

1.0.2(2024-12-03) 下载此版本

优化性能

1.0.1(2024-12-03) 下载此版本

1.0.1(2024-12-03)

1.0.0(2024-12-03) 下载此版本

首次发布

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × ×

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>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问