开启辅助访问 切换到宽版

精易论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

用微信号发送消息登录论坛

新人指南 邀请好友注册 - 我关注人的新帖 教你赚取精币 - 每日签到


求职/招聘- 论坛接单- 开发者大厅

论坛版规 总版规 - 建议/投诉 - 应聘版主 - 精华帖总集 积分说明 - 禁言标准 - 有奖举报

查看: 8796|回复: 1
收起左侧

[技术分享] uniapp 插件 拖动排序列表 HM-dragSorts

[复制链接]
发表于 2021-11-6 14:28:35 | 显示全部楼层 |阅读模式   广东省揭阳市
可拖动行,对列表进行排序,拖动触感反馈,兼容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

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x
发表于 2024-5-5 16:18:18 | 显示全部楼层   黑龙江省绥化市
感谢楼主分享
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则 致发广告者

发布主题 收藏帖子 返回列表

sitemap| 易语言源码| 易语言教程| 易语言论坛| 易语言模块| 手机版| 广告投放| 精易论坛
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论,本站内容均为会员发表,并不代表精易立场!
论坛帖子内容仅用于技术交流学习和研究的目的,严禁用于非法目的,否则造成一切后果自负!如帖子内容侵害到你的权益,请联系我们!
防范网络诈骗,远离网络犯罪 违法和不良信息举报电话0663-3422125,QQ: 793400750,邮箱:wp@125.la
Powered by Discuz! X3.4 揭阳市揭东区精易科技有限公司 ( 粤ICP备12094385号-1) 粤公网安备 44522102000125 增值电信业务经营许可证 粤B2-20192173

快速回复 返回顶部 返回列表