微信小程序左滑删除的功能实现

微信小程序使用的是改变left /其实也可以使用tranform:tranlatex

<view class="box1"  bindtouchmove="touchMove" bindtouchstart="touchstart" style="left:{{moveSpace}}px">
  <view class="bluebox"></view>
  <view class="redbox" ></view>
</view>

样式的话主要还是依靠定位把删除模块隐藏,然后一个优化点是把动画延迟一下,更有体验感

.box1{
  height: 200rpx;
  background-color: #cccc;
  position: relative;
  transition: all 0.5s;
}
.bluebox{
  height: 100%;
  background-color: blue;
  width: 100%;
}
.redbox{
  height:100%;
  width: 200rpx;
  background-color: red;
  position: absolute;
  top: 0;
  right: -200rpx;
}


Component({
  properties: {},
  data: {
    touchStart: null,
    moveSpace: 0 
  },
  methods: {
    touchstart: function (e) {
      // console.log(e.changedTouches[0].clientX)
      this.setData({
        touchStart: e.changedTouches[0].clientX
      })
    },
    touchMove: function (e) {
      let clientX = e.changedTouches[0].clientX;
      let touchStart = this.data.touchStart;
      if (touchStart != null) {
        if (clientX - touchStart >= 100) {
          this.setData({
            touchStart: null,
            moveSpace: 0
          })
        } else if (clientX - touchStart <= -100) {
          this.setData({
            touchStart: null,
            moveSpace: -90
          })
        }
      }
    },
  }
})