【愚公系列】2022年08月 微信小程序-左划删除效果实现

---

前言

左划删除效果实现主要用到两个标签：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>
1
2
3
4
5
6
7
8
9
10
11
12

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;
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

2.第三方组件实现

2.1 第三方包安装

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

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

2.2 使用

{
  "usingComponents": {
    "slide-view": "miniprogram-slide-view"
  }
}
1
2
3
4
5

<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>
1
2
3
4
5
6
7
8

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

3.1 weui方式使用

3.1 weui安装

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

"useExtendedLib": {
  "weui": true
}
1
2
3

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

3.2 使用

{
  "usingComponents": {
    "mp-slideview": "weui-miniprogram/slideview/slideview"
  }
}
1
2
3
4
5

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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的路径
      }],
  });
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18