微信小程序实现左滑删除

效果

实现思路

使用的是官方提供的movable-area 嵌套movable-view

1、movable-area：注意点，需要设置其高度，否则会出现列表内容重叠的现象。

2、由于movable-view需要向右移动，左滑的时候给删除控件展示的空间，故 movable-area 需要左移 left: -180rpx;

3、movable-view右移left: 180rpx;。 通过 width: calc(100% - 180rpx);左划的距离。

4、 需要给movable-view组件设置层级 z-index: 1001;越高越好至少比删除组件层级高，避免被遮住。

源代码如下

.js

 listData: [{
      id: '1',
      name: '这是一个左滑删除功能',
    }, {
      id: '1',
      name: '这是一个左滑删除功能',
    }, {
      id: '1',
      name: '这是一个左滑删除功能',
    }, {
      id: '1',
      name: '这是一个左滑删除功能',
    }, {
      id: '1',
      name: '这是一个左滑删除功能',
    }, ],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.xml

 <scroll-view class='scroll_box' scroll-y='true'>
    <block wx:for="{{listData}}" wx:key="id">
      <movable-area class="moveArea">
        <movable-view class="movableView" direction="horizontal" inertia="{{true}}" out-of-bounds="{{true}}">
          <view style="display: flex;flex-direction: row;width: 100%;height: 100%;">
            <view class="box_item">
              <view class="head_title">
                <text class="before-icon"></text>
                <text>{{item.name}}</text>
              </view>
            </view>
          </view>
        </movable-view>
        <view class="itemDelet">删除</view>
      </movable-area>
    </block>

  </scroll-view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.css

.scroll_box {
  /* background-color: #f0f0f0; */
  width: 100%;
  height: calc(100vh - 500rpx);
  margin-top: 28rpx;
  padding: 0 22rpx;
}


/* item盒子 */
.box_item {
  background-color: #fff;
  width: 100%;
  height: 100rpx;
  display: flex;
  align-items: center;
  border-bottom: 2rpx dashed #EDEDED;
  padding-left: 30rpx;
  position: relative;
}


.head_title {
  height: 40rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #14AD00;
  line-height: 38rpx;
  text-align: left;
  font-style: normal;
  display: flex;
  align-items: center;
  text-transform: none;
}

.before-icon {
  display: inline-block;
  width: 9rpx;
  height: 9rpx;
  border-radius: 50%;
  margin-right: 30rpx;
  background: #14AD00;
}

.moveArea {
  display: flex;
  flex-direction: row;
  width: calc(100% + 180rpx);
  justify-content: center;
  left: -180rpx;
  height: 102rpx;
}

.movableView {
  display: flex;
  flex-direction: row;
  width: calc(100% - 180rpx);
  z-index: 1001;
  left: 180rpx;
}

.itemDelet {
  position: absolute;
  right: 0;
  line-height: 100rpx;
  background-color: rgb(252, 65, 65);
  margin-right: 6rpx;
  bottom: 2rpx;
  width: 180rpx;
  text-align: center;
  color: #fff;
}

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
67
68
69
70
71
72
73
74