微信小程序左滑删除

使用微信小程序自带视图容器组件movable-area
描述: 可移动的视图容器，在页面中可以拖拽滑动。movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。

JS

Page({
  data: {
    cardList:[
      { id:1, name:'card1', },
      { id:2, name:'card2', },
      { id:3, name:'card3', },
      { id:4, name:'card4', },
    ]
  },
  /** 点击删除 */
  handleDelete(e) {
    let {id} = e.currentTarget.dataset;
    this.itemDel(id)
  },
  /** 删除逻辑 */
  itemDel(id){
    this.data.cardList.forEach((item,index)=>{
      if(item.id==id){
        this.data.cardList.splice(index,1)
      }
      this.setData({
        cardList:this.data.cardList
      })
      wx.showToast({
        title: '删除成功',
        icon:'success'
      })
    })
  },

  /** 处理touchstart事件 */
  handleTouchStart(e) {
    this.startX = e.touches[0].pageX
  },
  /** 处理touchend事件 */
  handleTouchEnd(e) {
      if (e.changedTouches[0].pageX < this.startX && e.changedTouches[0].pageX - this.startX <= -30) {
          this.showDeleteButton(e)
      } else if (e.changedTouches[0].pageX > this.startX && e.changedTouches[0].pageX - this.startX < 30) {
          this.showDeleteButton(e)
      } else {
          this.hideDeleteButton(e)
      }
  },
  /** 显示删除按钮 */
  showDeleteButton: function (e) {
    let index = e.currentTarget.dataset.index;
    this.setXmove(index, -65);
    // 其它复位
    let {cardList} = this.data;
    if (cardList.length > 0) {
      cardList.forEach((item,itemIndex) => {
        if (index != itemIndex && cardList[itemIndex].xmove != 0) {
          this.setData({
            ['cardList['+itemIndex+'].xmove']: 0
          });
        }
      });
    }
  },
  /** 隐藏删除按钮 */
  hideDeleteButton: function (e) {
      let index = e.currentTarget.dataset.index;
      this.setXmove(index, 0);
  },
  /** 设置movable-view位移 */
  setXmove: function (index, xmove) {
      let {cardList} = this.data;
      cardList[index].xmove = xmove;
      this.setData({
        cardList: cardList
      })
  },
  /** 处理movable-view移动事件 */
  handleMovableChange: function (e) {
    if (e.detail.source === 'friction') {
        if (e.detail.x < -30) {
            this.showDeleteButton(e)
        } else {
            this.hideDeleteButton(e)
        }
    } else if (e.detail.source === 'out-of-bounds' && e.detail.x === 0) {
        this.hideDeleteButton(e)
    }
  },
})

wxml

<view class="con">
  <block wx:for="{{cardList}}" wx:key="index">
    <view class="top" >
      <movable-area>
        <movable-view out-of-bounds="true" direction="horizontal" x="{{item.xmove}}" inertia="true" 
              data-index="{{index}}" bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd"bindchange="handleMovableChange">  
          <view>{{item.name}}</view>
        </movable-view>
      </movable-area>
      <view class="movable_delete_btn" data-id="{{item.id}}" bindtap="handleDelete">删除</view>
    </view>
  </block>
</view>

wxss

.con{
  width: 100%;
  box-sizing: border-box;
  padding: 0 20 rpx 20rpx 20rpx;
}
.top{
  margin: 20rpx auto;
  width: 710rpx;
  height: 200rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  line-height:200rpx;
  text-align:center;
  display: flex;
  /* 添加此属性 不会划出界面 */
  overflow-x: hidden
}
movable-view{
  width: 710rpx;
  height: 200rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  line-height:200rpx;
  text-align:center;
}
movable-area{
  height: 200rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  line-height:200rpx;
  text-align:center;
  width: calc(710rpx - 115rpx);
}
.movable_delete_btn {
  width: 115rpx;
  font-size: 24rpx;
  font-weight: 600;
  color: #FFFFFF;
  background: red;
  border-top-right-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
}