小程序--列表左滑效果

1.WXML

<block wx:for="{{memberList}}" wx:key="id" wx:for-item="card" wx:for-index="idx">
  <view class="user_card" data-card_leftId="{{idx}}" bindtouchstart="drawerStart" bindtouchmove="drawerMove">
    <!--列表內容區-->
    <view class="userphoto_wrap" style="right: {{myInde== idx? '55%':'0'}}">
          內容
    </view>
    <!--左滑操做區-->
    <view class="cell_wrap">
      <view class="team" data-id='{{card.memberId}}' catchtap='editMember'>編輯</view>
      <view class="remove" data-id='{{card.memberId}}' catchtap='delMember'>刪除</view>
    </view>
  </view>
</block>

2.WXSS

.user_card {
    width: 100%;
    height: 177rpx;
    background: #fff;
    position: relative;
}

.userphoto_wrap {
    position: absolute;
    width: 100%;
    height: 177rpx;
    background: #fff;
    z-index: 60;
    transition: all .25s ease;
    -webkit-transition: all .25s ease;
}
.cell_wrap {
    position: absolute;
    right: 0;
    width: 54%;
    height: 177rpx;
    z-index: 55;
    overflow: hidden;
}
.team {
    width: 50%;
    height: 177rpx;
    line-height: 177rpx;
    text-align: center;
    background-color: #1AAD19;
    float: left;
    color: #fff;
    font-size: 26rpx;
}

.remove {
    width: 50%;
    height: 177rpx;
    line-height: 177rpx;
    text-align: center;
    background-color: red;
    float: left;
    color: #fff;
    font-size: 26rpx;
}

3.JS

Page({

    /**
     * 頁面的初始數據
     */
    data: {
        myInde: '',
        startX:'',
        startY:'', 
        endX:'', 
        endY:'',
        card_leftid:'',
    },
    onLoad: function(options) {
        var self = this;
    }, 
    //手指觸摸開始 
    drawerStart: function(e) {
        var touch = e.touches[0];
        this.setData({
            card_leftid:e.currentTarget.dataset.card_leftid,
            startX :touch.clientX,
            startY :touch.clientY
        })
    },  
    //手指觸摸滑動離開
    drawerMove: function(e) {
        var touch = e.touches[0];
        this.setData({
            endX : touch.clientX,
            endY : touch.clientY,
        })
      this.drawerEnd();//執行滑動效果
    }, 
    //滑動效果
    drawerEnd: function(e) {
        var self = this;
        //從右往左
        var myInde = card_leftid + 'swipe';
        if ((endX - startX) <0) {
                self.setData({
                    myInde: myInde
                })
        } else { //從左往右
                self.setData({
                    myInde: ''
                })
         }
    },