小程序 — 实现左滑删除效果①

前言：实现这个效果有几种方式，大家可以看看这篇文章从京东购物，印象笔记看小程序左滑交互的实现
，而我们就使用最新的方案，就是用movable-view来实现左滑删除的效果。
GitHub：https://github.com/Ewall1106/miniProgramDemo

首先上图看下效果：

小程序实现左滑删除效果

1、movable-area基本概念

大家仔细去看看官网的文档后再来看我写的这篇文章可能会更好理解。

（1）movable-area这个就是定义了一个移动的区域，跟普通的<view></view>的含义是一样的，不同在于，接着往下看；

注意：movable-area 必须设置width和height属性，不设置默认为10px

（2）movable-view这个就是一个可移动的视图容器，可以在页面中拖拽滑动。

movable-view 必须设置width和height属性，不设置默认为10px
movable-view 默认为绝对定位，top和left属性为0px
当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）

• 但是要注意： movable-view必须在<movable-area/>组件中，并且必须是直接子节点，否则不能移动。
• 有这么一些属性（没截全）：

部分截图来自于小程序官网

OK，这就是关于movable-area组件的一些基本概念的介绍，接下来我们实践实践。

2、页面结构

（1）这是我们html基本页面结构，我主要来解释一下movable-view的属性起到了一些什么作用。

• 首先我们定义了direction方向为horizontal(横向)；
• 然后x就是偏移方向，这里我们给个默认值为0；
• out-of-bounds定义当超过可移动区域后，还可以移动；
• damping为阻尼系数，设置为100就是让它移动快点；
• 最后绑定了一个在拖动过程中触发的事件、触摸开始和结束事件。

基本html结构

（2）然后我们定义一下css样式，这里大家应该能看得懂，我就不多说了：

样式

主要请仔细看看容器的宽度，后面我们设置movable-view的x属性的时候是根据样式的宽度来处理的。

3、小结

这样，我们的页面基本结构就实现了，到这里，我们还有这么几个问题需要解决完善：

• 事件的监听，当超过最大滑动距离时，让movable-view提供一个非常流畅的过界动画和回弹效果；
• 设置阈值，往左移动超过阈值则显示删除按钮，否则隐藏（一般为删除按钮宽的40%）；

我们下章再讲。