微信小程序 购物车 滑动删除

<view class="page">
  <movable-area class="item-touch" wx:for="{{cartdata}}" wx:index="idx" wx:key="index">  
    <movable-view bindtouchstart="_touchStart" bindtouchmove="_touchMove" bindtouchend="_touchEnd" x="{{item.x}}" direction="horizontal" inertia="true" out-of-bounds="true" data-i="{{index}}" class="item-touch-list flex" data-id="touch">
       {{index}}购物车商品{{item.id}}
    </movable-view>  
    <view class="item-touch-tool">删除</view>
  </movable-area>
</view>

.page {
  position: fixed;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  width: 100%;
  height: 100%;
  border-top: 20rpx solid#f5f5f5
}

.item-touch {
  display: flex;
  position: relative;
  margin-bottom: 20rpx;
  width: calc(750rpx - 148rpx);
  height: 100rpx;
  line-height: 100rpx;
}

.item-touch-list {
  z-index: 10;
  width: 750rpx;
  height: 100%;
  padding-left: 30rpx;
  box-sizing: border-box;
  background-color: #fff;
}

.item-touch-tool {
  width: 148rpx;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  background-color: #f43838;
  font-size: 28rpx;
  line-height: 100rpx;
  text-align: center;
  color: #fff;
}

//logs.js
const util = require('../../utils/util.js')

Page({
  data: {
    logs: [],
    cartdata: [{ id: 1, x: 0 }, { id: 2, x: 0 }, { id: 3, x: 0 }],
    startX:0,
    isLeft:0,
    delBtnw:148
  },
  _touchStart:function(e){
    console.log(e);
    //排除多点触摸
    if(e.touches.length==1){
      this.setData({
        startX:e.touches[0].clientX
      });
    }

    console.log('start'+util.formatTime(new Date()));
  },
  _touchMove:function(e){
 
  },
  _touchEnd:function(e){
    var that=this;
    console.log(e);
    var cartIndex=e.currentTarget.dataset.i;

    var delw=that.data.delBtnw;
    if(e.changedTouches.length==1){
      var endX = e.changedTouches[0].clientX-that.data.startX;
            // 判断是否向左滑动
      if (endX>=0){
        that.setData({
          isLeft:0
        })
      }else{
        that.setData({
          isLeft:1
        })
      }
      console.log(endX);
      if(Math.abs(endX)<delw/4)
      {
        that.xMove(cartIndex,0);
      }else{
        that.xMove(cartIndex,that.data.delBtnw);
      }
    }
  },
  xMove:function(i,x){
    console.log(i+','+x);
    var that=this;
    var tempData=that.data.cartdata;
    console.log(that.data.isLeft);
    if(that.data.isLeft){
      tempData[i].x = tempData[i].x - x;      
    }else
    {
      tempData[i].x = tempData[i].x + x;
    }

    that.setData({
      cartdata:tempData
    });
    console.log('xMove:');
    console.log(that.data.cartdata);
  },
  onLoad: function () {

  }
})