前言

左划删除效果实现主要用到两个标签：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.1 weui方式使用

1.1 weui安装

在app.js中使用扩展声明：

"useExtendedLib": {
  "weui": true
}

小程序开发者工具选择：菜单-工具-构建npm 就完成了weui的引入

1.2 使用

{
  "usingComponents": {
    "mp-slideview": "weui-miniprogram/slideview/slideview"
  }
}

<view class="page__bd">
  <view class="weui-cells">
    <mp-slideview ext-class="slideViewClass" buttons="{{slideButtons}}" bindbuttontap="slideButtonTap">
      <mp-cell value="标题文字"></mp-cell>
    </mp-slideview>
  </view>
	<view class="weui-cells">
    <mp-slideview buttons="{{slideButtons}}" icon="{{true}}" bindbuttontap="slideButtonTap">
      <view class="weui-slidecell">
        左滑可以删除（图标Button）
        111
      </view>
    </mp-slideview>
	</view>
</view>

onLoad: function(){
  this.setData({
      icon: base64.icon20,
      slideButtons: [{
        text: '普通1',
        src: '/images/icon_love.svg', // icon的路径
      },{
        text: '普通2',
        extClass: 'test',
        src: '/images/icon_star.svg', // icon的路径
      },{
        type: 'warn',
        text: '警示3',
        extClass: 'test',
          src: '/images/icon_del.svg', // icon的路径
      }],
  });
},