小程序左滑删除 movable-view 和 moveable-

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 偏移量的值。

相关文章：

1. 小程左滑删除 slide-view（二）
   
2. 小程序左滑删除 WeUI 中 Slideview（三）