小程序滑动删除 movable-area movable-view

使用微信小程序的movable-view组件。movable-view。
使用position: absolute;，将可滑动部分（z-index值较大）放置在删除按钮（z-index值较小）之上，最开始是遮住删除按钮的。
使用touchstart、touchend属性绑定方法，控制删除按钮的显示隐藏。

WXML:

点击(此处)折叠或打开

1. <view class='box'>
   
2.   <block wx:for="{{delList}}" wx:key="this">
   
3.   <view class='box_item'>
   
4.     <view class='movebox'>
   
5.       <movable-area>
   
6.         <movable-view direction="horizontal" x="{{curr==item.id?x:''}}" data-id="{{item.id}}" bindtouchstart='touchStart' bindtouchend='touchEnd' out-of-bounds="{{true}}" friction="150">
   
7.           {{item.text}}
   
8.         </movable-view>
   
9.       </movable-area>
   
10.       <view class='delbox' data-delID="{{item.id}}" catchtap='del'>
    
11.         删除
    
12.       </view>
    
13.     </view>
    
14.   </view>
    
15. </block>
    
16. </view>

在使用movable-view中用到的属性：
direction="horizontal",设置movable-view为横向移动。
out-of-bounds="{{true}}",设置超过区域之后，movable-view是否还可以移动,这个属性默认值为false，如果不添加这个属性，就不会有回弹效果。
friction="150"设置摩擦系数，摩擦系数越大，滑动越快停止。
x="{{x}}"设置x轴方向的偏移。
tip: movable-view 必须设置width和height属性，不设置默认为10px。
tip: movable-view 默认为绝对定位，top和left属性为0px

wxss

点击(此处)折叠或打开

1. .box_item{
   
2.   margin-top: 20rpx;
   
3. }
   
4. .movebox{
   
5.   position: relative;
   
6. }
   
7. movable-area{
   
8.   width: 620rpx;
   
9.   height: 100rpx;
   
10. 
    
11. }
    
12. movable-view{
    
13.   border:5px solid red;
    
14.   width: 750rpx;
    
15.   height: 100rpx;
    
16.   background: pink;
    
17.   box-sizing: border-box;
    
18.   position: absolute;
    
19.   z-index: 999999;
    
20.   top:0rpx;
    
21.   left: 0rpx;
    
22.   text-align: left;
    
23.   line-height: 80rpx;
    
24. }
    
25. .delbox{
    
26.   width: 100rpx;
    
27.   height: 100rpx;
    
28.   text-align: center;
    
29.   line-height: 100rpx;
    
30.   background: greenyellow;
    
31.   color: #fff;
    
32.   font-size: 30rpx;
    
33.   position: absolute;
    
34.   top: 0rpx;
    
35.   right: 0rpx;
    
36.   z-index: 2;
    
37. }

js
通过控制movable-view的x属性来控制删除按钮的显示和隐藏。
绑定movable-view的touchstart和touchend事件，记录开始位置，滑动结束位置的 clientX
结束位置- 开始位置>20 说明 向左滑动   设置x:-120  不是则x:0

点击(此处)折叠或打开

1. // pages/movedel/movedel.js
   
2. Page({
   
3. 
   
4.   /**
   
5.    * 页面的初始数据
   
6.    */
   
7.   data: {
   
8.     x: 0, // 注意，这里通过x属性设置的宽度的单位是px
   
9.     delList: [{
   
10.         id: 1,
    
11.         text: "con1"
    
12.       },
    
13.       {
    
14.         id: 2,
    
15.         text: "con2"
    
16.       },
    
17.       {
    
18.         id: 3,
    
19.         text: "con3"
    
20.       },
    
21.       {
    
22.         id: 4,
    
23.         text: "con4"
    
24.       },
    
25.       {
    
26.         id: 5,
    
27.         text: "con5"
    
28.       }
    
29.     ]
    
30.   },
31.   /**
    
32.    * 点击开始
    
33.    */
    
34.   touchStart: function(e) {
    
35.     console.log(e, e.touches[0].clientX)
    
36.     this.setData({
    
37.       s_x: e.touches[0].clientX,
    
38.       curr: e.currentTarget.dataset.id
    
39.     })
    
40.   },
    
41.   /**
    
42.    * 移动结束
    
43.    */
    
44.   touchEnd: function(e) {
    
45.     console.log(e, e.changedTouches[0].clientX)
    
46.     var e_x = e.changedTouches[0].clientX
    
47.     if (this.data.s_x - e_x > 20) {
    
48.       console.log("向左滑")
    
49.       this.setData({
    
50.         x: -120
    
51.       })
    
52.     } else {
    
53.       this.setData({
    
54.         x: 0
    
55.       })
    
56.     }
    
57. 
    
58.   },
    
59.   /**
    
60.    * 删除选中的
    
61.    */
    
62.   del:function(e){
    
63.     var _this = this, id = e.currentTarget.dataset.delID
    
64.     this.data.delList.splice(id,1)
    
65.     this.setData({
    
66.       delList: this.data.delList,
    
67.       curr:0
    
68.     })
    
69.   }
    
70. })