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

news/2024/9/22 4:19:28/

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

此组件是根据支付宝原生文档改编成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的尺寸,页面渲染后的尺寸就有差异,计算就不准

http://www.ppmy.cn/news/1458046.html

相关文章

【链表-双向链表】

链表-双向链表 1.链表的分类1.1 分类依据1.2 常用类型 2.双向链表的2.1 双向链表的结构2.2 双向链表的操作2.2.1 **初始化**2.2.2 **尾插**2.2.3 **头插**2.2.4 **尾删**2.2.5 **头删**2.2.6 在pos位置之后插入数据2.2.7 删除pos节点2.2.8 查找2.2.9 销毁 1.链表的分类 1.1 分…

Unity调用智谱API(简单操作 文本实时翻译)

代码展示: using Newtonsoft.Json; using System; using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.Networking; using UnityEngine.UI;public class ZhiPuAi : MonoBehaviour {// API的端点URLpublic string…

JS 实现继承的几种方式

现在有parent、child两个函数,child函数的实例想要访问parent函数的属性和方法(child想要继承parent)。 1、原型链继承 缺点:有引用的值共享的问题 即当parent某个属性是引用数据类型的时候,child实例如果修改了这个…

【算法练级js+java】重复给定字符n次

题目 Repeats the given string n times.(复制指定的字符串n次) 期望结果 /** * Repeats the given string n times. * * repeat(‘, 3) * // > **’ * * repeat(‘abc’, 2) * // > ‘abcabc’ * * repeat(‘abc’, 0) * // > “” **/ 代码…

护眼台灯哪个牌子最好?618五款护眼台灯品牌推荐

在光照不足的环境中,护眼台灯还能提升阅读和学习的视觉舒适度,减轻眼疲劳和视觉疲劳的可能性。鉴于当今儿童和青少年的学习用眼时间较长,而且他们处于视力发展的关键阶段,眼瞳更为敏感,容易发生近视,因此&a…

专业软件测试会议

全国软件测试会议:这是一个系列性的专业会议,由中国的学术机构或专业组织主办,例如中国计算机学会的容错计算专业委员会。此会议自2005年起开始举办,历届会议地点包括北京、昆明和武汉等地。会议内容覆盖软件测试理论、实践、工具…

GO语言核心30讲 进阶技术 (第二部分)

原站地址:Go语言核心36讲_Golang_Go语言-极客时间 一、接口类型的合理运用 1. 接口类型只包含方法,不包含字段。 方法集合就是它的全部特征。 任何数据类型,只要实现了接口的方法集合全部,那么它就是这个接口的实现类型 2. 怎么…

网络安全之DHCP详解

DHCP:Dynamic Host Configration Protocol 动态主机配置协议 某一协议的数据是基于UDP封装的,当它想确保自己的可靠性时,这个协议要么选确认重传机制,要么选周期性传输。 DHCP是确认重传,【UDP|DHCP】,当DHCP分配完地…