仿探探左右滑动效果（兼容安卓，ios，小程序，h5）

Posted 2023-04-30

参考技术A 运行条件

HBuilder X 3.7

安装后，从插件市场导入，即可真机运行

vue

项目地址

[github]( https://github.com/15157757001/cardDel ).

[uniapp插件市场]( https://ext.dcloud.net.cn/plugin?id=893 ).

说明

一些浏览器的原生事件会和touch事件冲突导致效果不佳。

插件设计: 插件不仅仅可以实现仿探探的效果，还能通过参数实现卡片不同的动画效果的变化。

基本模板里提供了简单的动画效果。

性能优化：尽量使用较小的图片

使用方式

**在index.js中** 

~~~

import clCardDel from "@/components/clCardDel/clCardDel";

mixins:[clCardDel]

~~~

| 参数 | 类型 | 默认值 | 说明 |

| --- | --- | --- | --- |

| number | Number | 2 | 存在的卡片数量 |

| moveRotate | Object | x:0,y:0 | 设置位移图片旋转角度距离  card中心点 - 指向坐标 |

| delMoveD | Number | screenHeight*2 | 删除移动距离 |

| touchMoveD | Number | 100 | card移动距离 card移动距离/touchMoveD = 其他card变化比率 |

| rotate | Number | 0 | 第2张卡片旋转角度 |

| scale | Object | x:1,y:1 | 第2张卡片缩放 |

| skew | Object | x:0,y:0 | 第2张卡片倾斜 |

| translate | Object | x:0,y:0 | 第2张卡片位移 |

| opacity | Number | 1 | 第2张卡片透明度 |

# 事件

| 事件名 | 说明 |

| ---  | --- |

| init | 设置初始参数 |

| getData | 获取数据 |

| moveJudge(x,y,ratio) | 触摸中判断 |

| endJudge(x,y) | 触摸结束判断 |

| _back | 执行回退动画 |

| _del | 执行删除动画 |

LayoutManager+ItemTouchHelper实战，仿探探 炫动滑动 卡片层叠布局-张旭童-专题视频课程...

LayoutManager+ItemTouchHelper实战，仿探探 炫动滑动 卡片层叠布局—9930人已学习
课程介绍    

    简单&优雅实现 仿探探首页、人人影视订阅界面 炫动滑动 卡片层叠 布局，利用LayoutManager+ItemTouchHelper+RecyclerView打造，边写边讲解LayoutManager+ItemTouchHelper这两个重点也是难点。 还会对ItemTouchHelper进行部分源码解析。
课程收益
    1 掌握用自定义LayoutManager实现特殊列表布局。（本课程实现卡片层叠布局） 2 掌握ItemTouchHelper搭配RecyclerView的使用。 3 利用ItemTouchHelper实现拖拽&滑动删除&循环逻辑。
讲师介绍
    张旭童 更多讲师课程
    江湖人称，注释张。14年底实习，15年硕士毕业。先从事Android ROM app 研发，后投身互联网行业。坚持原创，热爱开源。目前github-awards 上 java ranking：Shanghai 第10，China 第46。累计收获近4k stars.
课程大纲
  第1章:概述和效果预览
    1. 概述和效果预览  5:20
  第2章:LayoutManager 实现 卡片层叠
    1. LM学习前言和注意事项  8:26
    2. 准备工作  12:42
    3. LayoutManager 实现卡片层叠  29:45
  第3章:ItemTouchHelper 实现 炫动滑动
    1. 基础入门  16:41
    2. 入门小结和思路（人人影视效果)  2:38
    3. 起飞 ItemTouchHelper实现炫动滑动  8:28
  第4章:人人影视效果的实现
    1. 人人影视效果的实现和演示  19:13
  第5章:探探效果的实现
    1. 探探效果的实现  18:58
  第6章:源码解析（阈值的寻找之路）
    1. 源码解析（阈值的寻找之路）  10:04
  第7章:总结
    1. 总结  6:41
大家可以点击【 查看详情】查看我的课程