微信小程序学习第5周————movable-view（可移动视图区域--右滑删除效果）

Movable-view：可移动的视图容器，在页面中可以拖拽滑动。movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。

1、首先按要求创建movable-view组件，需包含在movable-area组件中

2、属性：

direction：属性值有all(所有方向)、vertical(纵向)、horizontal(横向)、none(没有方向)

Inertia:是否带有惯性（布尔）

out-of-bounds：超过可移动区域后，movable-view是否还可以移动

X：定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画

Y:定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画

Damping：简单理解为动画过渡速度

这里只列举部分属性，详细可查看小程序官网文档-movable-view

将右滑需要的属性赋予movable-view

3、创建css样式
注意：tip: movable-view 必须设置width和height属性，不设置默认为10px
tip: movable-view 默认为绝对定位，top和left属性为0px
Tip：movable-area域内只能存在一个movable-view

Css样式设置移动区域为100屏幕宽度，移动item为60屏幕宽度，这样设置的话移动item就只能在100屏幕宽度内移动。

首先我们设想的是删除滑块在屏幕外显示，当右滑发生后，将删除滑块滑出，那么初始列表的宽度就为100vw，假设加上20vw的删除滑块的宽度，就是120vw，这样的宽度将无法在100vw的移动区域内移动。

由于可视移动区域的构建过程是从左向右的，也就是说如果我们将可视区域设置在100vw，将120vw的移动item托到末端的100vw，这时删除按钮就露了出来。剩下的就是一系列的js操作。

那么，页面结构修改如下：

样式表修改如下：

初始实例：

右滑后：

到这里右滑删除的基本样态已经实现，大家可更具自身需求，更详细的了解学习。