小程序 — 实现左滑删除效果②

前言：这章我们为movable-view添加点击事件，完善左滑效果。
GitHub：https://github.com/Ewall1106/miniProgramDemo

1、 拖动事件

（1）在上一章中，我们给movable-view绑定了一个bindchange事件，事件名为onChange，这个事件是干吗的呢？

拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData）

事件绑定

（2）所以我们就可以利用这个事件做点事情了

• 首先我们先定义三个初始化变量x、currentX

data = {
  // x轴方向的偏移
  x: 0,
  // 当前x的值
  currentX: 0
};

• 然后监听下拖动事件并赋值给currentX

handleMovableChange(e) {
    this.currentX = e.detail.x;
    this.$apply();
}

2、手指触摸事件

将当前的currentX赋值给x以定义偏移量。

methods = {
  handleMovableChange(e) {
    this.currentX = e.detail.x;
    this.$apply();
  },
  handleTouchend(e) {
    if (this.currentX < -46) {
      this.x = -92;
      this.setData({
        x: this.x
      });
    } else {
      this.x = 0;
      this.setData({
        x: this.x
      });
    }
  }
};

上面有几行代码很少但却是整个实现左滑删除效果的核心代码，请仔细看，这里涉及到一个数据渲染的问题，后面我会讲。

this.x = -92;
this.setData({
  x: this.x
});

3、完整代码

全部js代码：

<script>
import wepy from 'wepy';

export default class Chapter5 extends wepy.page {
  data = {
    // x轴方向的偏移
    x: 0,
    // 当前x的值
    currentX: 0
  };

methods = {
  handleMovableChange(e) {
    this.currentX = e.detail.x;
    this.$apply();
  },
  handleTouchend(e) {
    if (this.currentX < -46) {
      this.x = -92;
      this.setData({
        x: this.x
      });
    } else {
      this.x = 0;
      this.setData({
        x: this.x
      });
    }
  }
};
}
</script>

至此，我们的用小程序实现左滑删除的效果基本上就全部实现了，如果你是用小程序原生开发的话，其实原理都是一样的，所以实现的方式也差不多。下一章是进阶。