微信小程序左滑刪除的功能實現

微信小程序使用的是改變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
          })
        }
      }
    },
  }
})