uniapp 插件 拖动排序列表 HM-dragSorts

黑色滴夜

可拖动行，对列表进行排序，拖动触感反馈，兼容APP-VUE、H5、MP-WEIXIN

[JavaScript] 纯文本查看 复制代码

<template>
    <view class="content">
        <HM-dragSorts :list="list" :isLongTouch="true" :rowHeight="55" @change="change" @confirm="confirm" @onclick="onclick">
            <template slot="rowContent" slot-scope="{ row }">
                <view class="row">
                    <image v-if="row.icon" class="icon" :src="row.icon"></image>
                    <text class="text">{{row.name}}</text>
                </view>
            </template>
        </HM-dragSorts> 
    </view>
</template>
<style lang="scss" scoped>
    //scoped css只在当前页生效 不影响子组件
    page {background-color: #efeff4;}
    @media (prefers-color-scheme: dark){page {background-color: #000000;} }
    .content {.row{display: flex;flex-direction: row;align-items: center;.icon{width: 30px;border-radius: 6px;margin-right: 13px;}.text{font-size: 13px;}}}
</style>

[JavaScript] 纯文本查看 复制代码

    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: {
            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 ===');
            }
        }
    }

插件市场地址: https://ext.dcloud.net.cn/plugin?id=1372

qmcy888

感谢楼主分享