微信小程序：左滑功能

wxml代码：

<view>
  <block wx:for="{{numList}}" wx:key="key" wx:for-index="idx">
    <movable-area style="width:120%; height:200rpx; margin-top:50rpx; margin-left:-166rpx;">
      <movable-view style='width:80%; height:200rpx;' direction="horizontal" out-of-bounds="true" x="{{item.x}}" damping="50" animation="true" bindtouchend="touchendfunc" bindchange="changefunc" data-index="{{idx}}" bindtouchstart="touchstartfunc">
        <view class='box' catchtap='gopages'>
          <view>{{item.num}}</view>
        </view>
      </movable-view>
    </movable-area>
  </block>
</view>

wxss代码：

.box{
  width: 96%;
  height: 200rpx;
  background: #fff;
  border-radius: 15rpx;
  box-shadow:2px 2px 5px #CFD0D0;
  margin: auto;
}
page{
  background: #ddd;
}

js代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    numList:[
      {
        num:"1",
        x:100
      },
      {
        num: "2",
        x: 100
      },
      {
        num: "3",
        x: 100
      },
      {
        num: "4",
        x: 100
      },
      {
        num: "5",
        x: 100
      },
      {
        num: "6",
        x: 100
      }, 
      {
        num: "7"
      }
      , {
        num: "8"
      }
    ],
    damping:10
  },
  changefunc: function (e) { //手指触摸后移动
    this.setData({
      dangqianweizhi:e.detail.x
    })
  },
  touchendfunc:function(e){ //手指动作后结束 
    console.log('手指动作后结束'+this.data.dangqianweizhi);
    if(this.data.dangqianweizhi <= 45){
      console.log(3)
      this.setData({
        ['numList[' + e.currentTarget.dataset.index + '].x'] : 0
      })
    }else{
      this.setData({
        ['numList[' + e.currentTarget.dataset.index + '].x']: 90
      })
    }
  },
  touchstartfunc:function(e){
    console.log('手指触摸动作开始' + this.data.numList[e.currentTarget.dataset.index].x)
    for(var i in this.data.numList){
      if (this.data.numList[i].x == 0) {
        console.log(5)
        this.setData({
          ['numList[' + i + '].x']: 90,
        })
      }
    }
  },
  gopages:function(){
    console.log('跳转')
  }
})