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

embedded/2024/12/22 20:37:13/

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

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

相关文章

java项目之校园失物招领系统(springboot+vue+mysql)

风定落花生,歌声逐流水,大家好我是风歌,混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的校园失物招领系统。项目源码以及部署相关请联系风歌,文末附上联系信息 。 项目简介: 校园失物招领系统的主要…

Ansible之playbook剧本

目录 1. playbook的组成 2. 剧本示例test1 2.1 剧本制作 2.2 准备http.conf 2.3 运行剧本 2.4 查看webserbers服务器 3. 剧本示例test2--定义、引用变量 3.1 剧本制作 3.2 运行剧本 3.3 查看dbservers服务器 3.4 修改剧本中的变量设定 3.5 在命令行定义变量运行剧本…

ThinkPHP8导出Excel单元格为下拉选择框

说明 本文章是基于上一篇ThinkPHP8 导出Excel数据表格文章的完善版,上一篇仅导出为文本框,此处增加下拉框。 其他内容与上一章不变,此处展示不同内容。 更改 1.头部数组修改 增加type类型,text为文本框,select为下…

Java高阶私房菜:JVM性能优化案例及讲解

目录 核心思想 优化思考方向 压测环境准备 堆大小配置调优 调优前 调优后 分析结论 垃圾收集器配置调优 调优前 调优后 分析结论 JVM性能优化是一项复杂且耗时的工作,该环节没办法一蹴而就,它需要耐心雕琢,逐步优化至理想状态。“…

科技查新中医学科研项目查新点如何确立与提炼?案例讲解

一、前言 医学科技查新包括立项查新和成果查新两个部分,其中医学立项查新,它是指在医学科研项目申报开题之前,通过在一定范围内进行该课题的相关文献检索 ( 可以根据项目委托人的具体要求,进行国内检索或者进行国外检索 ) &#x…

LeetCode2352相等行列对

题目描述 给你一个下标从 0 开始、大小为 n x n 的整数矩阵 grid ,返回满足 Ri 行和 Cj 列相等的行列对 (Ri, Cj) 的数目。如果行和列以相同的顺序包含相同的元素(即相等的数组),则认为二者是相等的。 解析 针对题目给出的数量级…

LVS负载均衡超详细入门介绍

LVS 一、LVS入门介绍 1.1.LVS负载均衡简介 1.2.负载均衡的工作模式 1.2.1.地址转换NAT(Network Address Translation) 1.2.2.IP隧道TUN(IP Tunneling) 1.2.3.直接路由DR(Direct Routing) 1.3.…

(论文阅读-分析引擎)Modin

一、简介 目标是在不改变的Dataframe语义的情况下支持可扩展的dataframe操作。 什么是机会主义评价?Opportunistic Evaluation? Exploratory data analysis(EDA):总结、理解并从数据集中获取价值的过程。 MPI&#…