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的尺寸,页面渲染后的尺寸就有差异,计算就不准

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

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

相关文章

BGP(border gateway protocol)边界网关协议初识篇

BGP它是一种路径矢量协议,用于决定数据包在互联网中的最佳路径。 1、工作原理: 自治系统(AS)间路由: BGP主要用于连接不同自治系统之间的路由器,其中每个自治系统(AS)代表一组具有共同路由的网…

编译 fdk-aac

文章目录 关于 fdk-aac编译 fdk-aac在 FFMpeg 编译中启用 关于 fdk-aac A standalone library of the Fraunhofer FDK AAC code from Android. github : https://github.com/mstorsjo/fdk-aac代码托管 : https://sourceforge.net/projects/opencore-am…

最新巨量X-Bogus、_signature参数逆向分析与算法还原

文章目录 1. 写在前面2. 接口分析3. 断点分析4. 扣代码补环境5. 数据解密 【🏠作者主页】:吴秋霖 【💼作者介绍】:擅长爬虫与JS加密逆向分析!Python领域优质创作者、CSDN博客专家、阿里云博客专家、华为云享专家。一路…

# 从浅入深 学习 SpringCloud 微服务架构(十六)

从浅入深 学习 SpringCloud 微服务架构(十六) 一、SpringCloudStream:自定义消息通道 1、在子工程 stream_product (子模块)中,创建 自定义的消息通道类 MyProcessor.java /*** spring_cloud_demo\stream_product…

JavaEE概述 + Maven

文章目录 一、JavaEE 概述二、工具 --- Maven2.1 Maven功能 仓库 坐标2.2 Maven之项目构建2.3 Maven之依赖管理 三、插件 --- Maven Helper 一、JavaEE 概述 Java SE、JavaEE: Java SE:指Java标准版,适用于各行各业,主要是Java…

【负载均衡式在线OJ项目day5】OJ服务模块概要

前言 经过四天的努力已经完成了编译运行这个大模块,今天将要进入OJ服务模块设计,该模块的本质就是建立一个小型网站 一.功能 为用户提供题目列表页面为用户提供网站首页(用题目列表充当首页)为用户提供指定题目的编辑页面为用户提供提交代码判题功能&a…

FFmpeg常用API与示例(二)—— 解封装与转封装

封装层 封装格式(container format)可以看作是编码流(音频流、视频流等)数据的一层外壳,将编码后的数据存储于此封装格式的文件之内。 封装又称容器,容器的称法更为形象,所谓容器,就是存放内容的器具,饮料是内容&…

【QT学习】补充:qt使用已经存在的类

1.右键项目--》添加现有文件 注意:不是添加新文件!!! 2.添加配置

掌握Android Fragment开发之魂:Fragment的深度解析(上)

Fragment是Android开发中用于构建动态和灵活界面的基石。它不仅提升了应用的模块化程度,还增强了用户界面的动态性和交互性,允许开发者将应用界面划分为多个独立、可重用的部分,每个部分都可以独立于其他部分进行操作。本文将从以下几个方面深…

信息系统项目管理师0102:可行性研究的内容(7项目立项管理—7.2项目可行性研究—7.2.1可行性研究的内容)

点击查看专栏目录 文章目录 7.2项目可行性研究7.2.1可行性研究的内容1.技术可行性分析2.经济可行性分析3.社会效益可行性分析4.运行环境可行性分析5.其他方面的可行性分析记忆要点总结7.2项目可行性研究 可行性研究是在项目建议书被批准后,从技术、经济、社会和人员等方面的条…

OpenWrt项目UCI配置介绍

UCI(Unified Configuration Interface)是 OpenWrt 项目中使用的一种配置管理系统。它旨在为嵌入式设备提供一个统一且易于理解的配置接口。UCI 主要用于简化 OpenWrt 系统的各种配置过程,使得管理网络、服务和其他系统参数变得更加方便。 1 …

String的substring()方法导致的内存泄露问题

JDK 6的实现 String(int offset, int count, char value[]) {this.value value;this.offset offset;this.count count; }public String substring(int beginIndex, int endIndex) {//check boundaryreturn new String(offset beginIndex, endIndex - beginIndex, value);…

r语言数据分析案例-北京市气温预测分析与研究

一、选题背景 近年来,人类大量燃烧煤炭、天然气等含碳燃料导致温室气 体过度排放,大量温室气体强烈吸收地面辐射中的红外线,造 成温室效应不断累积,使得地球温度上升,造成全球气候变暖。 气象温度的预测一直以来都是…

[算法][差分][延迟相差][leetcode]2960. 统计已测试设备

题目地址: https://leetcode.cn/problems/count-tested-devices-after-test-operations/description/ 解法一:暴力解法 class Solution {public int countTestedDevices(int[] batteryPercentages) {//特殊条件判断if(null batteryPercentages || ba…

JavaScript DOM 对元素进行的操作

DOM(Document Object Model)是一种用于访问和操作HTML和XML文档的编程接口。JavaScript通过DOM提供的方法和属性可以对网页的元素进行各种操作,比如修改元素的内容、样式、属性等。 下面是一些常见的对DOM元素的操作以及相应的代码示例&…

@RequestMapping path正则规范

RequestMapping 注解是 Spring MVC 中用于映射 HTTP 请求的注解之一。它可以用于处理各种 HTTP 请求,包括 GET、POST、PUT、DELETE 等,并且可以指定请求的路径、请求方法、请求参数等信息。 在使用 RequestMapping 注解时,可以使用正则表达式…

51单片机入门:串口通信

串行通信的初步认识 通信方式分类 1、按照数据传送方式: 并行通信:通信时数据的各个位同时传送,可以实现字节为单位的通信。 但是通信线多,占用资源多,成本高。 串行通信:一次只能发送一位&#xff0c…

python把png转成jpg

在Python中,你可以使用PIL(Python Imaging Library,也称为Pillow)库来读取PNG图片并将其转换为JPG格式。下面是一个简单的示例代码: from PIL import Image# 打开PNG图片 png_image Image.open(input.png)# 保存为JP…

微软exchange邮箱发送

使用java发送exchange类型的邮件&#xff0c;foxmail中配置如下图&#xff1a; 需要的maven依赖如下&#xff1a; <dependency><groupId>com.microsoft.ews-java-api</groupId><artifactId>ews-java-api</artifactId><version>2.0</ve…

PCIE协议-2-事务层规范-Message Request Rules

2.2.8 消息请求规则 本文档定义了以下几组消息&#xff1a; INTx 中断信号电源管理错误信号锁定事务支持插槽电源限制支持厂商定义消息延迟容忍度报告&#xff08;LTR&#xff09;消息优化缓冲区冲洗/填充&#xff08;OBFF&#xff09;消息设备就绪状态&#xff08;DRS&#…