小程序 — 实现左滑删除效果②
前言：这章我们为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>至此，我们的用小程序实现左滑删除的效果基本上就全部实现了，如果你是用小程序原生开发的话，其实原理都是一样的，所以实现的方式也差不多。下一章是进阶。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.09.13 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读