前言

左划删除效果实现主要用到两个标签：movable-area、movable-view。

1、movable-area

movable-view的可移动区域：

• movable-area 必须设置 width 和height属性，不设置默认为10px
• 当 movable-view 小于 movable-area 时，movable-view的移动范围是在 movable-area 内
• 当 movable-view 大于 movable-area 时，movable-view的移动范围必须包含movable-area（x轴方向和 y 轴方向分开考虑）
• 若当前组件所在的页面或全局开启了 enablePassiveEvent 配置项，该内置组件可能会出现非预期表现

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

• movable-view 必须设置 width 和height属性，不设置默认为10px
• movable-view 默认为绝对定位，top和 left 属性为0px
• 若当前组件所在的页面或全局开启了 enablePassiveEvent 配置项，该内置组件可能会出现非预期表现

一、左划删除效果实现

1.自定义实现

<view class="page-section-title">左侧删除</view>
<view class="list_item">
  <movable-area style="width:750rpx;height:100rpx;">
    <movable-view style="width:1050rpx;height:100rpx;" direction="horizontal" class="max">
      <view class="left">这里是插入到组内容</view>
      <view class="right">
        <view class="read">已读</view>
        <view class="delete">删除</view>
      </view>
    </movable-view>
  </movable-area>
</view>

movable-view {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  width: 100rpx;
  background: #1AAD19;
  color: #fff;
}

movable-area {
  height: 400rpx;
  width: 400rpx;
  background-color: #ccc;
  overflow: hidden;
}

.max {
  width: 600rpx;
  height: 600rpx;
  background-color: blue;
}

.list_item {
  display: flex;
  border-bottom: 1px solid #DEDEDE;
}

.slide{
  /* border-top:1px solid #ccc; */
  border-bottom:1px solid #DEDEDE;
}
.left {
  background-color: white;
  height: 100rpx;
  width: 750rpx;
  display: flex;
  flex-direction: row;
  color: grey;
  line-height: 100rpx;
  padding-left: 30rpx;
}
.right {
  height: 100;
  display: flex;
  direction: row;
  text-align: center;
  vertical-align: middle;
  line-height: 110rpx;
}
.read {
  background-color: #ccc;
  color: #fff;
  width: 150rpx;
}
.delete {
  background-color: red;
  color: #fff;
  width: 150rpx; 
}
/*  */
.slideViewClass .weui-cell{
  padding: 0;
}