movable-view: 可移动容器；
movabel-area: 可移动区域，movable-view 必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。
可移动的三种情况
1、两者大小相等
即 movable-view 和 movabel-area 的大小相等，此时是无法移动的。
2、movable-view 小于movable-area
movable-view的 positon 默认为 absolute，movabel-area的position默认为relative。
此时 movable-view 在 movabel-area 里面任意方向移动，x、y 值为正。
movable-view < movable-area.png
3、movable-view 大于movable-area
此时 movable-view 在 movabel-area 外面任意方向移动，x、y 值为负。
movable-view > movable-area.png
如何实现左滑？
将 movabel-area 设置为屏幕宽度，将movable-view的宽度设置为屏幕宽度 + 左滑按钮区域宽度的和。
左边的主要内容与右边的操作按钮都是movable-view的子元素。将movable-view 的 direction 设置为 horizontal，即只能水平方向移动，即可实现左滑。
//wxml
<view>自定义左滑删除</view>
<movable-area class="m-area" style="width:750rpx;height:100rpx;">
<movable-view class="m-view" style="width:1050rpx;height:100rpx" direction="horizontal">
<view class="left">内容</view>
<view class="right">
<view class="read">已读</view>
<view class="delete">删除</view>
</view>
</movable-view>
</movable-area>
//wxss
.m-area {
background-color: red;
}
.m-view {
background-color: cyan;
display: flex;
}
.left {
background-color: yellowgreen;
width: 100%;
}
.right {
background-color: blue;
display: flex;
}
.read {
background-color: #fff;
color: #000;
width: 150rpx;
}
.delete {
background-color: red;
color: #000;
width: 150rpx;
}
代码比较粗糙，这里只提供了大概的思路，如果要加入自动回弹的效果，需要自行在 js 文件中判断 x 偏移量的值。
