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

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

WXML:

<view class='box'>
  <block wx:for="{{delList}}" wx:key="this">
  <view class='box_item'>
    <view class='movebox'>
      <movable-area>
        <movable-view direction="horizontal" x="{{curr==item.id?x:''}}" data-id="{{item.id}}" bindtouchstart='touchStart' bindtouchend='touchEnd' out-of-bounds="{{true}}" friction="150">
          {{item.text}}
        </movable-view>
      </movable-area>
      <view class='delbox' data-delID="{{item.id}}" catchtap='del'>
        删除
      </view>
    </view>
  </view>
</block>
</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

.box_item{
  margin-top: 20rpx;
}
.movebox{
  position: relative;
}
movable-area{
  width: 620rpx;
  height: 100rpx;

}
movable-view{
  border:5px solid red;
  width: 750rpx;
  height: 100rpx;
  background: pink;
  box-sizing: border-box;
  position: absolute;
  z-index: 999999;
  top:0rpx;
  left: 0rpx;
  text-align: left;
  line-height: 80rpx;
}
.delbox{
  width: 100rpx;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
  background: greenyellow;
  color: #fff;
  font-size: 30rpx;
  position: absolute;
  top: 0rpx;
  right: 0rpx;
  z-index: 2;
}

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

// pages/movedel/movedel.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    x: 0, // 注意，这里通过x属性设置的宽度的单位是px
    delList: [{
        id: 1,
        text: "con1"
      },
      {
        id: 2,
        text: "con2"
      },
      {
        id: 3,
        text: "con3"
      },
      {
        id: 4,
        text: "con4"
      },
      {
        id: 5,
        text: "con5"
      }
    ]
  },
  /**
   * 点击开始
   */
  touchStart: function(e) {
    console.log(e, e.touches[0].clientX)
    this.setData({
      s_x: e.touches[0].clientX,
      curr: e.currentTarget.dataset.id
    })
  },
  /**
   * 移动结束
   */
  touchEnd: function(e) {
    console.log(e, e.changedTouches[0].clientX)
    var e_x = e.changedTouches[0].clientX
    if (this.data.s_x - e_x > 20) {
      console.log("向左滑")
      this.setData({
        x: -120
      })
    } else {
      this.setData({
        x: 0
      })
    }

  },
  /**
   * 删除选中的
   */
  del:function(e){
    var _this = this, id = e.currentTarget.dataset.delID
    this.data.delList.splice(id,1)
    this.setData({
      delList: this.data.delList,
      curr:0
    })
  }
})