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

news2024/12/27 17:13:52

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

此组件是根据支付宝原生文档改编成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.coloradmin.cn/o/1665599.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

0X JavaSE-- UML、

# Unified Modeling Language UML 统一建模语言 UML 是一种图形化的语言。 UML 不是专门为 Java 准备的。 只要是面向对象的编程语言,开发前的设计,都需要画 UML 图进行系统设计。 最常用的四个 UML 图是 类图(Class Diagram)&…

【JavaEE】Maven简介与实用指南:项目构建和依赖管理的高效工具

目录 Maven什么是 Maven为什么学 Maven创建一个Maven项目依赖传递依赖排除 Maven 仓库本地仓库中央仓库私服 Maven设置国内源配置当前项⽬setting设置新项⽬的setting Maven 什么是 Maven 官⽅对于 Maven 的描述: Maven 是⼀个项⽬管理⼯具。基于 POM(Project Object Model,…

RS3236-ADJ8YF5功能和参数介绍及PDF资料

RS3236-ADJ8YF5功能和参数介绍及PDF资料-公司新闻-配芯易-深圳市亚泰盈科电子有限公司 品牌: RUNIC(润石) 封装: SOT-23-5 描述: 输出电压可调(参考电压0.81V),Iout500mA(Max),Vin7.5V(Max),带过温保护 输出类型: 可调 最大输入电压: 7.5V 输出电压: 810mV~6.6V 最大输出电流…

C语言学习(九)多文件编程 存储类型 结构体

目录 一、多文件编程(一)不写头文件的方方式进行多文件编程 (二)通过头文件方式进行多文件编程(1)方法(2)头文件守卫 (三) 使用多文件编程实现 - * / 功能 二…

Rust学习笔记(上)

前言 笔记的内容主要参考与《Rust 程序设计语言》,一些也参考了《通过例子学 Rust》和《Rust语言圣经》。 Rust学习笔记分为上中下,其它两个地址在Rust学习笔记(中)和Rust学习笔记(下)。 编译与运行 Ru…

LeetCode - 0088 合并两个有序数组

题目地址:https://leetcode.cn/problems/merge-sorted-array/description/ 引言:话接上回,由于上次面试官着急下班,面试不得不提前终止,这不,他又找我去面试了 面试官:你好,小伙子&a…

(二刷)代码随想录第4天|24. 两两交换链表中的节点 ● 19.删除链表的倒数第N个节点

24. 两两交换链表中的节点 24. 两两交换链表中的节点 - 力扣(LeetCode) 代码随想录 (programmercarl.com) 帮你把链表细节学清楚! | LeetCode:24. 两两交换链表中的节点_哔哩哔哩_bilibili 给你一个链表,两两交换其…

电影网站|基于SSM+vue的电影网站系统(源码+数据库+文档)

电影网站 目录 基于SSMvue的电影网站系统 一、前言 二、系统设计 三、系统功能设计 1 系统功能模块 2 管理员功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取: 博主介绍:✌️大厂码农|毕设布道…

C语言 | Leetcode C语言题解之第83题删除排序链表中的重复元素

题目: 题解: struct ListNode* deleteDuplicates(struct ListNode* head) {if (!head) {return head;}struct ListNode* cur head;while (cur->next) {if (cur->val cur->next->val) {cur->next cur->next->next;} else {cur …

Rancher-Kubewarden-保姆级教学-含Demo测试

一、什么是Kubewarden? What is Kubewarden? | Kubewarden 1、就是容器集群的准入策略引擎。 1、使用的策略其实就是k8s原生的security context. 2、使用WebAssembly来编写策略。 1、WebAssembly,可以使用擅长的开发语言来编写策略。(下面的…

撤销 git add 操作(忽略被追踪的文件)

文章目录 引言I git rm命令来取消暂存【推荐】II 撤销特定文件的暂存状态2.1 git rese2.2 git restoresee also引言 应用场景: 修改.gitignoregitignore只能忽略那些原来没有被追踪的文件,如果某些文件已经被纳入了版本管理中,则修改.gitignore是无效的。那么解决方法就是先…

Python 开发 框架安全:Django SQL注入漏洞测试.(CVE-2021-35042)

什么是 Django 框架 Django 是一个用 Python 编写的 Web 应用程序框架。它提供了许多工具和库,使得开发 Web 应用程序变得更加容易和高效。Django 遵循了“MTV”(模型-模板-视图)的设计模式,将应用程序的不同组件分离开来&#x…

【智能算法】鹭鹰优化算法(SBOA)原理及实现

目录 1.背景2.算法原理2.1算法思想2.2算法过程 3.结果展示4.参考文献5.代码获取 1.背景 2024年,Y Fu受到自然界中鹭鹰生存行为启发,提出了鹭鹰优化算法(Secretary Bird Optimization Algorithm, SBOA)。 2.算法原理 2.1算法思想…

stl学习以及abc比赛例题

1.引例 一提到查找,我们一上来想的肯定是find()函数或者search()函数,但是这种查找的底层逻辑终究是用顺序查找的方式,运行的时间成本非常高昂,所以平时能不用就不用,比赛的时候用这种查找和自己while遍历&#xff0c…

哈希表(unordered_set、unordered_map)

文章目录 一、unordered_set、unordered_map的介绍二、哈希表的建立方法2.1闭散列2.2开散列(哈希桶/拉链法) 三、闭散列代码(除留余数法)四、开散列代码(拉链法/哈希桶) 一、unordered_set、unordered_map的…

SpringSecurity集成第三方登录

SpringSecurity 集成第三方登录 认证及自定义流程 首先我们提供一个实现了AbstractAuthenticationProcessingFilter抽象类的过滤器,用来代替UsernamePasswordAuthenticationFilter逻辑,然后提供一个AuthenticationProvider实现类代替AbstractUserDetail…

【数据结构】浅谈

✨✨✨专栏:数据结构 🧑‍🎓个人主页:SWsunlight 目录 一、概念: 二、物理结构: 1、顺序存储结构: 2、链式存储结构: 3、数据索引存储结构: 4、数据散列存储结构&#xf…

数学学习笔记1——二次函数中的数形结合

二次函数中的数形结合 一、解一元二次不等式 基本方法&#xff1a;配方。 x 2 − 4 x 3 < 0 → ( x − 2 ) 2 < 1 → ∣ x − 2 ∣ < 1 → 1 < x < 3 x^2-4x3<0\to(x-2)^2<1\to\lvert x-2\rvert<1\to1<x<3 x2−4x3<0→(x−2)2<1→∣x−…

璩静是为了薅百度羊毛

关注卢松松&#xff0c;会经常给你分享一些我的经验和观点。 百度副总裁璩静离职了&#xff0c;网传她的年薪是1500万&#xff0c;而璩静在4月24日注册了一个文化传媒公司&#xff0c;大家都认为璩静是在为离职做准备。但松松我认为不是。 我认为&#xff1a;璩静成立新公司是…

【ORACLE战报】2024.4月最新OCP考试喜报.

课程介绍 DBA数据库管理必备认证&#xff1a;ORACLE OCP 19C 教材下载 ORACLE OCP 19C 官方电子教材 ORACLE OCP 12C官方电子教材 题库下载 ORACLE 19C题库 &#xff08;083384题、082362题&#xff09;-2024答案修正版.rar 所有的收获都是默默耕耘的成果 2024.4月【最新考试成…