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

相关推荐

  1. 程序定义组件

    2024-05-11 19:58:02       46 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-11 19:58:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-11 19:58:02       101 阅读
  3. 在Django里面运行非项目文件

    2024-05-11 19:58:02       82 阅读
  4. Python语言-面向对象

    2024-05-11 19:58:02       91 阅读

热门阅读

  1. Hive优化(1)——分桶采样

    2024-05-11 19:58:02       33 阅读
  2. Django调用SECRET_KEY对数据进行加密

    2024-05-11 19:58:02       29 阅读
  3. 905. 按奇偶排序数组

    2024-05-11 19:58:02       28 阅读
  4. vue2 与vue3的差异汇总

    2024-05-11 19:58:02       34 阅读
  5. SpringBoot MybatisPlus 配置动态表名&多数据源

    2024-05-11 19:58:02       23 阅读
  6. MacOS安装Go

    2024-05-11 19:58:02       33 阅读
  7. MySQL中获取指定日期区间内所有日期

    2024-05-11 19:58:02       34 阅读
  8. 面向过程和面向对象

    2024-05-11 19:58:02       29 阅读
  9. C++ 一款纯C实现的打砖块小游戏

    2024-05-11 19:58:02       29 阅读