更新记录

1.0.1（2023-07-27） 下载此版本

修改平台兼容性说明

1.0.0（2023-07-27） 下载此版本

初始提交，拖拽滚动列表组件，scroll-view与movable-area结合

平台兼容性

可自动滚动的拖拽列表

组件名：drag-scroll-list

简介

vue3拖拽滚动列表组件，scroll-view与movable-area结合。

功能

1. 提供slot,可自定义拖拽行的内容
2. 提供disabledDrag属性，用来控制初始化整个列表是否允许拖拽
3. 提供handelEnabledDrag和handelDisabledDrag方法，与disabledDrag配合，用来控制元素是否能进行拖拽
4. 当拖拽元素到达可视区顶部或底部时，列表会自动向上或向下滑动容器高度的一半

   特别注意

   该插件可用于uni-app小程序。其他平台兼容性未知

   用法

   参数

   列表参数

slot传递参数

示例

<template>
    <drag-scroll-list :data="data">
        <template #default="{ data, handelEnbabledDrag, handelDisabledDrag, index }">
            <div class="drag-item">
                <view class="title">{{ data.name }}</view>
                <view class="switch-container">
                    <switch color="#02B978" style="transform: scale(0.6)" :checked="data.isCheck" @change="(e) => changeSwitch(data, index)"
                    ></switch>
                </view>
                <view class="drag-icon" @touchstart="handelEnbabledDrag" @touchend="handelDisabledDrag">
                    <image src="/static/hanbao_kuan.png"></image>
                </view>
            </div>
        </template>
    </drag-scroll-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'
    const data = ref([
        {
            name: '模块1', code: 0, isCheck: false
        },
        {
            name: '模块2', code: 1, isCheck: false
        },
        {
            name: '模块3', code: 2, isCheck: false
        },
        {
            name: '模块4', code: 3, isCheck: false
        },
        {
            name: '模块5', code: 4, isCheck: false
        },
        {
            name: '模块6', code: 5, isCheck: false
        },
        {
            name: '模块7', code: 6, isCheck: false
        },
        {
            name: '模块8', code: 7, isCheck: false
        },
        {
            name: '模块9', code: 8, isCheck: false
        }
    ])
    const changeSwitch = (data: { name: string; code: string; isCheck: boolean }, index: number) => {
      // ...处理数据
    }
</script>