taro3兼容支付宝/微信小程序的自定义拖拽排序组件

描述:列表可以完成拖拽排序

此组件是根据支付宝原生文档改编成taro-vue3的形式,只保留了拖拽的部分,其他功能都去除了,测试下来可以兼容支付宝和微信小程序。

支付宝原生文档: https://opendocs.alipay.com/support/01rb28

一、布局

分成三块:list, 拖拽按钮浮层,拖拽时移动clone数据的movable-area/movable-view(movable-view里面的item和list中的一样)
在这里插入图片描述

二、思路
  1. 拖拽浮层上的事件touchstart、touchmove、touchend,用event.type判断
  2. event.type = touchstart时,根据触发点的pageX、pageY获取当前的item, 在根据pageY算出movable-view的y(x=0)
  3. event.type = touchmove时
    a. 根据不断变化的pageY计算movable-view的y
    b. 根据clientY判断是向上还是向下滑动及所到item的处理
  4. event.type = touchend时,确定list数据,隐藏movable-view部分
三、原生转taro-vue3时的差异

1、touch事件的大小写区别
在这里插入图片描述
在这里插入图片描述

2、touch事件中获取坐标
在这里插入图片描述

3、样式中的高度-- 有几个固定高度
a. 如果list上方还有其他元素,这个元素的高度必须是固定的
b. list中item的高度必须是固定的
c. movable-view和里面的item高度必须是固定的
d. 这个组件的list不长,所以把scroll-view高度也固定了,如果超过一屏,可以看原生中的处理

!!!注意:这些固定的高度是写在行内的,而且是按设计稿375的尺寸设置,单位px, 如果写在css文件中,按750的尺寸,页面渲染后的尺寸就有差异,计算就不准

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/614470.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

未来办公新方式--智能体与程序完美配合

Agent AI智能体的未来 工作中,有时候我们就像是在不停地踩着缝纫机,重复地做着那些单调乏味的任务,不仅耗时费力,还特别容易出错。可是,咱们现在可是生活在数字化时代啊!这时候,Python编程语言…

基于Nios软件实现流水灯+串口输出

基于NIOS-II软核实现流水灯串口输出 引言: ​ 在现代电子设计领域,FPGA(现场可编程门阵列)因其灵活性和并行处理能力而成为实现复杂数字系统的首选平台。Nios II,作为Altera(现为Intel旗下)提供…

综合能力 | 误差 | 学习笔记

误差指真值与观测值的差值。 误差分为系统误差(消除方法:观测方法、仪器校正、修正等)、偶然误差(符合正态分布规律,进行计算纠正)、粗差(一般舍弃)。 中误差(均方差或标…

Linux进程——进程地址空间

前言:在讲完环境变量后,相信大家对Linux有更进一步的认识,而Linux进程概念到这也快接近尾声了,现在我们了解Linux进程中的地址空间! 本篇主要内容: 了解程序地址空间 理解进程地址空间 探究页表和虚拟地址空…

决策树的学习(Decision Tree)

1.对于决策树的概念: **本质上:**决策树就是模拟树的结构基于 if-else的多层判断 2.目的: 对实例进行分类的树形结构,通过多层判断,将所提供的数据归纳为一种分类规则。 3.优点: 1.计算量小,…

华为配置Ethernet over GRE实现AC与无线网关之间的二层互通

华为配置Ethernet over GRE实现AC与无线网关之间的二层互通 组网图形 图1 通过Ethernet over GRE实现AC与无线网关之间的二层互通的组网图 组网需求数据规划配置思路操作步骤配置文件 组网需求 如图1所示,某企业通过无线网络为用户提供上网服务,其中A…

【35分钟掌握金融风控策略21】贷前额度策略

目录 贷前策略审批流程和统一额度管理 贷前策略审批流程 统一额度管理 预授信策略 贷前策略审批流程和统一额度管理 贷前包含了多个风控场景,这些风控场景的策略在执行时是否存在先后顺序呢?在贷前,除上述主要的风控场景,还有…

Flink DataSource介绍

介绍 Flink的Data Source(数据源、源算子)是Flink作业的起点,它定义了数据输入的来源。Flink可以从各种数据来源获取数据,例如文件系统、消息队列、数据库等。以下是对Flink Data Source的详细介绍: 概述&#xff1a…

ZigBee设备入网流程抓包分析(以飞利浦灯泡为例)

1.第一步,网关打开入网许可,广播Pjoin 2.第二步,设备开始扫网,发送Beacon Request 3.第三步,网关收到Beacon Request请求后,应答Beacon数据帧 4.收到可入网的Beacon帧后,发送关联请求&#xff0…

Java的时间类

1. 日期类 1.1 第一代日期类 1) Date: 精确到毫秒,代表特定的瞬间 2) SimpleDateFormat: 格式和解析日期的类 SimpleDateFormat 格式化和解析日期的具体类。它允许进行格式化(日期-→>文本)、解析(文本->日期)和规范化. import java.text.ParseExce…

Android AOSP Ubuntu源码编译电脑卡顿问题定位解决

文章目录 问题概述分析问题解决问题查看交换分区创建交换分区删除交换分区调整交换分区的活跃度 问题概述 开发SystemUI时,使用内存为16G的主机,Ubuntu 20.04的系统编译SystemUI的源码,编译的过程中发现电脑卡顿,鼠标不能移动。必…

在Linux上安装并运行RabbitMQ

目录 准备CentOS服务器 下载rabbit-server和erlang文件 启动RabbitMQ服务 准备CentOS服务器 两个命令,选一个能用的,查看CentOS服务器的版本 lsb_release -a下载rabbit-server和erlang文件 参考文章:http://t.csdnimg.cn/t8BbM 1、创建新…

IPv6资产测绘哪家强?揭秘新一代网络空间资产测绘平台的独门秘籍

网络空间资产测绘,即通过一系列技术手段,对网络中的各类资产进行全面的发现、分类和定位,为各类用户提供精准的数据支撑和决策依据。网络空间资产测绘作为一门新兴的交叉学科,融合了计算机网络技术、数据挖掘、人工智能、信息安全…

Mat: Unknown HPROF Version

问题:Mat 加载 android studio 导出的 hprof 文件失败 原因:android hprof 文件不是标准的 java hprof 文件 解决办法: 使用 android sdk 自带的命令将 hprof 转换成标准的 java hprof

去哪里找高清视频素材?推荐几个短视频素材免费网站

在数字时代,视频内容的质量直接影响观众的吸引力和留存率。尤其是高清、4K视频素材和可商用素材,它们在提升视觉质量和叙事深度方面起到了至关重要的作用。以下是一些国内外的顶级视频素材网站,它们提供的资源将为您的创作提供极大的支持和灵…

企业微信hook接口协议,ipad协议http,群发消息(每天每人一次)

群发消息(每天每人一次) 参数名必选类型说明uuid是String每个实例的唯一标识,根据uuid操作具体企业微信vids是long要发送的人或者群ididisroom是bool是否是群消息 请求示例 {"uuid":"xxxxxxxx","vids": [&qu…

渗透思考题

一,尝试登录。 客户端对密码进行哈希处理并缓存密码hash,丢弃实际的明文密码,然后将用户名发送到服务器,发起认证请求 密文存储位置:数据库文件位于C:WindowsSystem32configsam,同时挂载在注册表中的HKLMSA…

用python写算法——栈笔记

栈 栈的定义相关算法题 栈的定义 1.它是一种运算受限的线性表。限定仅在表尾进行插入和删除操作的线性表。这一端被称为栈顶,相对地,把另一端称为栈底。向一个栈插入新元素又称作进栈、入栈或压栈,它是把新元素放到栈顶元素的上面&#xff0…

12个网上赚钱野路子信息差,人人可做的赚钱小项目!

在这个多元化的时代,副业已经成为许多人增加收入、实现自我价值的重要途径。今天,我们就来聊聊那些既有趣又能赚钱的副业项目,让你的钱包鼓起来! 1.文字创作 写作不仅是情感的宣泄,更是财富的积累。无论是自媒体文、软…

【3dmax笔记】036:FDD修改器

一、FDD修改器简介 FDD修改器是对模型进行变形处理的命令,FDD后面的数字越大,编辑节点越多,编辑越精细,但是FDD控制点多的同时,模型上的节点也要多才可以。 FFD修改器是一种非常灵活的修改器,可以让我们对模型进行自由的变形操作。通过在FFD修改器中设置变形点,我们可…