更新记录

1.0.1（2025-08-10） 下载此版本

完善细节和文档

1.0.0（2025-08-08） 下载此版本

支持鸿蒙Next拖动排序

平台兼容性

云端兼容性

uni-app(4.27)

hcd-dragsort 拖动排序

组件说明

• 这是一个传入列表数据会生成一个可拖动排序列表的组件；
• 只支持单列多行；
• 由于没有插槽，行的样式需要自行从内部去修改；
• 拖动会有触感反馈，如果设备支持的话（鸿蒙 Next 不支持）；
• 组件使用了 wxs，兼容APP-VUE、H5、MP-WEIXIN，使用了 renderjs 兼容 APP-HARMONY；
• 组件是在HM-dragSorts的基础上进行修改的；

属性说明

内置函数说明

push，unshift，splice函数

内置了push，unshift，splice函数，组件设置ref属性，通过$refs调用，实现列表的删除插入，使用方法和数组的push，unshift，splice一致，push，unshift，splice函数修改后会返回修改后的值

例如：

let tmplist = this.$refs.dragSorts.splice(5,1,...rows);

使用示例

页面：

<template>
    <view>
        <hcd-dragsort 
            ref="dragSorts"
            :height="dragHeight" 
            :list="dataList" 
            :rowHeight="60" 
            :feedbackGenerator="true"
            @confirm="confirmSort"></hcd-dragsort>
    </view>
</template>

script：

<script>
    import HcdDragsort from '/path/hcd-dragsort.vue';
    export default {
        components: {
            HcdDragsort,
        },
        data() {
            return {
                dragHeight: 0,
                dataList: []
            }
        },
        onLoad() {
            var systemInfo = uni.getSystemInfoSync();
            console.log(systemInfo);
            var statusBarHeight = systemInfo.statusBarHeight;
            var navigationHeight = statusBarHeight + 44;
            this.dragHeight = systemInfo.screenHeight - navigationHeight;
            for (var i = 1; i < 100; i++) {
                this.dataList.push({
                    name: i + ''
                })
            }
        },
        methods: {
            confirmSort(e) {
                console.log(e)
            },
            changeSort(e) {
                console.log(e)
            }
        }
    }
</script>