小程序左滑删除效果

效果展示：

主要是利用小程序的touchstart和touchmove事件。

思路：

用户拖动item首先获取到touchstart的位置e.touches[0].clientX，在拖动过程中触发touchmove，获取到var moveX = e.touches[0].clientX，在获取两值差this.startX - moveX；通过判断差值（1、等于或小于零 2、大于零），第一种情况那就不显示，第二种就把当前拖动的item的index存起来（这是拖动是否显示对应item关键）。

微信小程序用的事wepy框架：

item组件：

html部分

<repeat for="{{list}}" key="index" index="index" item="item">
      <view class="card-list zan-clearfix">
        <view class="card-box flex-wrp" bindtouchstart="touchS({{index}})" bindtouchmove="touchM({{index}})" @tap="gotoDetail({{item.code}})" style="margin-left:{{currentIndex===index?'-100rpx':'0'}}">
          <view class="card-item flex-item logo">
            <image style="width: 60rpx;height:60rpx" mode="scaleToFill" src="../images/card_logo.png" />
          </view>
          <view class="card-item text">
            <view class="zan-font-12 title">{{item.orgName ? item.orgName : ' '}}</view>
            <text class="zan-font-22">{{item.code ? item.code : ' '}}</text>
          </view>
          <view class="card-item bg">
            <image style="width: 160rpx; height:95rpx;display:block" src="../images/code_bg.png" />
          </view>
        </view>
        <view class="dele-box" style="display:{{currentIndex===index?'block':'none'}}">
          <view class="del flex-wrp"><view class="iconfont icon-shanchu" @tap="delEvent({{item.code}})"></view></view>
        </view>
      </view>
</repeat>

js:

methods = {
    gotoDetail(code) {
      this.$emit('goDetailEvent', code)
    },
    delEvent(e) {
      this.$emit('delEvent', e)
    },
    touchS(i, e) {
      this.$emit('touchS', i, e)
    },
    touchM(i, e) {
      this.$emit('touchM', i, e)
    }
}

 list部分：

扫描二维码关注公众号，回复： 3988382 查看本文章

html:(调用item组件)

<card :list.sync="list" :currentIndex.sync="currentIndex" />

js:

events = {
    touchS(i, e) {
      console.log(i)
      if (e.touches.length === 1) {
        this.startX = e.touches[0].clientX
      }
    },
    touchM(i, e) {
      if (e.touches.length === 1) {
        var moveX = e.touches[0].clientX
        var disX = this.startX - moveX
        console.log(disX)
        if (disX === 0 || disX < 0) {
          this.currentIndex = null
        } else if (disX > 0) {
          this.currentIndex = i
        }
      }
    }
}

支付宝小程序：

item组件：

html:

<template name="comcard">
  <view>
    <block a:for="{{list}}" a:key="index" a:for-index="index" a:for-item="item" class="zan-panel">
      <view class="card-list zan-clearfix">
        <view class="card-box a-flex" data-code="{{item.code}}" data-index="{{index}}" onTap="gotoDetail" onTouchStart="touchS" onTouchMove="touchM" onTouchEnd="touchE" style="margin-left:{{currentIndex===index?'-100rpx':'0'}}">
          <view class="card-item flex-item logo">
            <image style="width: 60rpx;height:60rpx" mode="scaleToFill" src="../../../images/card_logo.png" />
          </view>
          <view class="card-item text">
            <view class="zan-font-12 title">{{item.orgName ? item.orgName : ' '}}</view>
            <text class="zan-font-22">{{item.code ? item.code : ' '}}</text>
          </view>
          <view class="card-item bg">
            <image style="width: 160rpx; height:95rpx;display:block" src="../../../images/code_bg.png" />
          </view>
        </view>
        <view class="dele-box" style="display:{{currentIndex===index?'block':'none'}}">
          <view class="del a-flex"><view class="iconfont icon-shanchu" data-code="{{item.code}}" onTap="delEvent"></view></view>
        </view>
      </view>
    </block>
  </view>
</template>

list页面：

html:

<import src="/page/component/com-card/com-card.axml"/>
<template is="comcard" data="{{...allData,currentIndex:currentIndex}}"/>

js:

touchS(e) {
    console.log(e)
    if(e.touches.length==1){
      this.setData({
        startX:e.touches[0].clientX
      })
    }
  },
  touchM(e) {
    let _index = e.target.dataset.index
    if(e.touches.length==1){
      var moveX = e.touches[0].clientX
      var disX = this.data.startX - moveX;
      if(disX == 0 || disX < 0){
        this.setData({
          currentIndex: null
        })
      }else if(disX > 0 ){
        this.setData({
          currentIndex: _index
        })
      }
    }
  },
  // 解绑卡
  delEvent(e){
    let _code = e.target.dataset.code
    console.log(e)
  },

简易版，欢迎各路大神交流~