更新记录

1.0.6（2023-12-19）

• 修复vue3app环境下，拖动丢失行的问题
• UVUE版本支持了多行多列，可以去看看传送门

1.0.5（2023-01-09）

• 修复拖动后，@onclick返回错误行下标
• 增加push()，unshit()，splice()返回值，现在通过这三个函数修改后，会返回修改后的列表数组

1.0.4（2022-11-17）

• 新增push，unshit，splice函数，实现列表的删除插入
• 重写了给wxs传递数据的逻辑

平台兼容性

组件说明

• 这是一个传入列表数据会生成一个可拖动排序列表的组件
• 此组件只支持单列多行，UVUE版本支持了多行多列，可以去看看传送门
• 因为废弃了插槽，所以，行的样式需要自行到组件内部去修改
• 行内容可以自行到组件，组件只支持每行都相等高度的列表
• 拖动会有触感反馈，如果设备支持的话。
• 组件使用了wxs，兼容APP-VUE、H5、MP-WEIXIN，其他端未做兼容，不支持。
• [BUG] vue3下，只支持长按拖拽
• 下载示例并运行，你的很多疑问或得到答案。

属性说明

内置函数说明

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 class="content">
        <HM-dragSorts ref="dragSorts"  :list="list" :autoScroll="true" :feedbackGenerator="true" :listHeight="300" :rowHeight="55" @change="change" @confirm="confirm" @onclick="onclick" ></HM-dragSorts>  
    </view>
</template>
<style lang="scss" scoped>
    //scoped css只在当前页生效 不影响子组件
    page {background-color: #efeff4;}
</style>

script:

    import dragSorts from '@/uni_modules/components/HM-dragSorts/HM-dragSorts.vue' // 组件符合easycom规范，默认这个可以不写
    export default {
        components: {'HM-dragSorts':dragSorts},// 组件符合easycom规范，默认这个可以不写
        data() {
            return {
                list:[
                    {"name": "花呗", "icon": "/static/img/1.png"},
                    {"name": "余额宝","icon": "/static/img/2.png"},
                    {"name": "账户余额","icon": "/static/img/3.png"},
                    {"name": "交通银行信用卡(0001)""icon": "/static/img/4.png"},
                    {"name": "中国建设银行信用卡(4401)","icon": "/static/img/5.png"},
                    {"name": "网商储蓄卡(7223)","icon": "/static/img/6.png"}
                ]
            }
        },
        methods: {
            push(){
                // 和数组的push使用方法一致，可以push单行，也可以push多行
                this.$refs.dragSorts.push({
                        "name": "push行",
                        "icon": "/static/img/2.png"
                    });
            },
            unshift(){
                // 和数组的unshift使用方法一致，可以unshift单行，也可以unshift多行
                this.$refs.dragSorts.unshift({
                        "name": "unshift行",
                        "icon": "/static/img/2.png"
                    });
            },
            splice(){
                // 和数组的unshift使用方法一致 下标1开始删除1个并在下标1位置插入行
                this.$refs.dragSorts.splice(1,1,{
                        "name": "splice行",
                        "icon": "/static/img/2.png"
                    });
            },
            onclick(e){
                console.log('=== onclick start ===');
                console.log("被点击行: " + JSON.stringify(e.value));
                console.log("被点击下标: " + JSON.stringify(e.index));
                console.log('=== onclick end ===');
            },
            change(e){
                console.log('=== change start ===');
                console.log("被拖动行: " + JSON.stringify(e.moveRow));
                console.log('原始下标：',e.index);
                console.log('移动到：',e.moveTo);
                console.log('=== change end ===');
            },
            confirm(e){
                console.log('=== confirm start ===');
                console.log("被拖动行: " + JSON.stringify(e.moveRow));
                console.log('原始下标：',e.index);
                console.log('移动到：',e.moveTo);
                console.log('=== confirm end ===');
            }
        }
    }

更多的说明请下载示例运行查看，有示例对照注释更容易明白。