前言

左划删除效果实现主要用到两个标签：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.1 第三方包安装

第三方组件实现的安装步骤如下：

1. 项目根目录下执行npm init -y 命令完成后项目会生成package.json文件
2. 在执行安装包命令：npm install --save miniprogram-slide-view
3. 小程序开发者工具选择：菜单-工具-构建npm

2.2 使用

{
  "usingComponents": {
    "slide-view": "miniprogram-slide-view"
  }
}

<view class="page-section-title">左侧删除2</view>
<slide-view class="slide" width="750" height="100" slideWidth="300">
	<view class="left" slot="left">这里是插入到组内容2</view>
	<view class="right" slot="right">
		<view class="read">已读</view>
		<view class="delete">删除</view>
	</view>
</slide-view>

注意：这边实现效果移动大于百分50置顶右边，百分50置顶左边