微信小程序movable-view实现左滑删除功能

TDon

前言

微信小程序官方没有自带的左滑删除功能,一般开发的时候都是使用touch事件来开发自定义的左滑删除,处理起来会有点麻烦。微信小程序出了movable-view(点击查看官方文档)之后,我们就可以使用movable-view来开发左滑删除功能了。

源码

Talk is cheap. Show me the code.

实现原理

  1. 左滑的元素高度需要是固定的,因为movable-view要求必须设置width和height;
  2. 删除的按钮固定在右侧,设置一定的宽度;
  3. movable-area宽度设置为100vw-删除按钮宽度movable-view宽度设置为100vw
  4. 根据movable-viewx属性来控制元素滑动,为了避免滑动到一半只显示部分按钮,可以设置滑动小于一半不再滑动时回复到初始位置,超过一半则继续滑动到底。
  5. 一直拖动movable-view时会出现只触发touch事件的情况,所以需要针对touchstarttouchend事件进行特殊情况处理。

效果图

  • 左滑

左滑

  • 删除

图片描述

阅读 22.2k

DON的前端分享
前端开发,也了解一些后端的开发。分享个人项目和开发经验。
906 声望
42 粉丝
0 条评论
906 声望
42 粉丝
文章目录
宣传栏