微信小程序左滑删除

图示

项目中有时会用到左滑删除功能，开始是监听touchmove setData改变样式来实现，效率很低

后使用movable-view实现，简单顺滑

样式简单，有一点要注意movable-area movable-view有默认宽高为10，需要自己设置宽高，自适应高度设为auto，movable-view改为relative定位

<movable-area class="item" 
    wx:for="{{list}}" 
    wx:for-index="index" 
    bind:tap="selectItem" 
    data-idx="{{index}}" 
    data-id="{{item.id}}" 
    bindtouchstart="touchstart" 
    bindtouchend="touchE">
      <movable-view class="move-area"
          damping="50" 
          x="{{index==curIdx?item.itemOffset:0}}" 
          direction="horizontal" 
          out-of-bounds="true" 
          friction="50">
              <view>内容</view>
              <view>删除</view>
      </movable-view>
</movable-area>

touchE: function (e) {
    //按钮宽度(px)
    let btnW = 168
    if (e.changedTouches.length == 1) {
      //获取手指结束滑动的坐标
      var endX = e.changedTouches[0].clientX;
      //计算手指移动的距离
      var disX = startX - endX;
      //如果距离小于删除按钮的1/2，不显示删除按钮
      var itemOffset = disX > btnW / 2 ? -btnW : 0;
      //获取当前滑动项
      var idx = e.currentTarget.dataset.idx;
      //更新列表的状态
      this.setData({
        curIdx:idx,
        ['address['+idx+'].itemOffset']: itemOffset
      });
    }
  },
  //手指触摸动作开始 记录起点X坐标
  touchstart: function (e) {
    startX= e.changedTouches[0].clientX
  },